SVG Animationen mit CSS

HTML-Element und CSS transform

SVG wird auf dieselbe Weise animiert wie HTML, allerdings hat SVG sein eigenes Koordinatensystem, das für Webdesigner mit HTML- und CSS-Hintergrund anfangs erst mal »anders« ist.

Animierte HTML-Elemente müssen absolut positioniert sein. In HTML ist der Mittelpunkt des Elements der Ausgangspunkt (transform-origin) einer Transformation.

<div class="htmlbox">
	<div class="htmlrect"></div>
</div>

.htmlrect {
   width: 210px; height: 210px; 
   position: absolute; 
   top: 20px; left: 20px; 
   background: plum;
   animation: spin 5s infinite;
}

@keyframes spin {
   from {transform:rotate(0deg);}
   to {transform:rotate(359deg);}
}

SVG und CSS transform

Beide Animationen benutzten dieselbe Keyframes-Definition. In SVG ist der Ausgangspunkt eines Elements der Nullpunkt (0,0) der viewBox des SVG-Elements, also die obere linke Ecke des Canvas. SVG-Elemente rotieren nicht um ihren Mittelpunkt, sondern um eben diese obere linke Ecke des SVG-Fensters (gekennzeichnet durch einen roten Viertelkreis).

<div class="svgbox">
   <svg height="100%" width="100%" viewBox="0 0 600 600">
   <style>
      #spinner { 
         animation: spin 5s infinite; 
      }
   </style>
   <rect height="600" width="600" y="0" x="0" fill="none" stroke="black" />
   <rect id="spinner" rx="13.65" height="500" width="500" y="50" x="50" fill="plum"/>
</svg>
</div>

Für ein SVG-Element muss transform-origin() den Ursprung der Transformation verlagern.

#spinner2 { 
   animation: spin 5s infinite; 
   transform-origin: 50% 50%;
}

Mehr zu CSS transform-origin

SVG CSS-transform in IE11

SVG Transformationen mit CSS funktionierten nicht in IE11. Da IE SVG-SMIL-Animationen ebensowenig unterstützte, blieben nur die Animation der Transformation mit Javascript, wenn IE noch unterstützt werden sollte.

IE11 unterstützt transform-Attribute in SVG, obwohl IE CSS-transform-Attribute nicht erkennt. Zum Glück kann das SVG-transform-Attribut mit Javascript animiert werden.

var g= document.querySelector('#myform');
var transform = getComputedStyle(g).getPropertyValue('transform');

g.setAttribute('transform', transform);

Quelle: CSS transforms on SVG in IE