SVG Animationen mit CSS transform und keyframes

Eigentlich wären CSS Transform und Keyframes die bevorzugten Techniken für SVG-Animationen – ohne Plugins und Libraries, sondern mit einfach nur CSS.

Alle SVG-Attribute, die in einem style-Attribut in SVG verwendet werden können, sind mit CSS animierbar.

SVG 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.

.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);}
}

Das animierte HTML-Element muss absolut positioniert sein. In HTML ist transform-origin – der Ausgangspunkt einer Transformation – der Mittelpunkt des Elements.

<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>

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).

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

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

#wing2 {
   animation: swingRight 3s infinite;
}

@keyframes swingLeft {
   0% { transform: rotate(0deg); transform-origin: 107px 40px;}
   40% {transform: rotate(30deg); transform-origin: 107px 40px;}
   100% {transform: rotate(0deg); transform-origin: 107px 40px;}
}

@keyframes swingRight {
   0% { transform: rotate(0deg); transform-origin: 140px 40px;}
   40% {transform: rotate(-30deg); transform-origin: 140px 40px;}
   100% {transform: rotate(0deg); transform-origin: 140px 40px;}
}

SVG transform in IE11

SVG Transformationen funktionieren nicht in Internet Explorer und in Microsoft Edge. Da IE und Edge SVG-SMIL-Animationen ebensowenig unterstützen, bleibt nur die Animation der Transformation mit Javascript.

IE11 unterstützt transform-Attribute in SVG, obwohl IE CSS transform-Attribute nicht erkennt. Glücklicher Weise kann das transform-Attribut mit Javascript gesetzt werden.

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

g.setAttribute('transform', transform);

Quelle: CSS transforms on SVG in IE