SVG Animationen mit CSS transform und keyframes

SVG Animationen mit CSS

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.

18-12-15 SITEMAP

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