SVG mit CSS und SMIL animieren

SVG-Darstellungsattribute wie fill, stroke, opacity und transform können mit CSS-Übergängen animiert werden. Fügen Sie eine Klasse hinzu und definieren Sie den Übergang: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. CSS-Übergänge funktionieren bei SVG-Elementen genauso wie bei HTML-Elementen.

Wenden Sie @keyframes auf SVG-Elemente an: Animieren Sie stroke-dashoffset für Zeicheneffekte bei Pfaden, opacity für Einblendungen und transform für Bewegungen und Drehungen. Die für HTML-Elemente verwendete Animationssyntax gilt ohne Änderungen auch für SVG-Elemente.

Die Technik mit stroke-dasharray und stroke-dashoffset simuliert das Zeichnen eines Pfads: Setzen Sie dasharray auf die Pfadlänge, dashoffset auf die Pfadlänge (unsichtbar), und animieren Sie dashoffset anschließend auf 0. Dadurch scheint der Strich vom Anfang bis zum Ende gezeichnet zu werden.

path.getTotalLength() gibt die Länge des Pfads in SVG-Benutzereinheiten zurück. Verwenden Sie diesen Wert sowohl für stroke-dasharray als auch für den anfänglichen Wert von stroke-dashoffset. So funktioniert die Animation unabhängig von der Komplexität oder Länge des Pfads korrekt.

Moderne Browser unterstützen CSS transform bei SVG-Elementen. transform-origin ist bei SVG-Elementen standardmäßig die obere linke Ecke des SVG – nicht die Mitte des Elements wie bei HTML. Geben Sie transform-box: fill-box an, damit sich transform-origin auf die Begrenzungsbox des Elements bezieht.

SMIL (Synchronized Multimedia Integration Language) ist das integrierte Animationssystem von SVG. Das animate-Element ändert Attributwerte im Laufe der Zeit. SMIL benötigt weder JavaScript noch CSS – Animationen werden vollständig deklarativ im SVG-Markup definiert.

<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"> dreht ein Element mithilfe der SMIL-Syntax um einen festgelegten Mittelpunkt.

<animateMotion> bewegt ein Element entlang eines SVG-Pfads. Referenzieren Sie einen Pfad mit mpath oder fügen Sie die Pfaddaten direkt ein. Das Element folgt der Pfadkurve automatisch – hilfreich für komplexe Bewegungspfade ohne manuelle Berechnung von Koordinaten.

CSS-Animationen: werden von allen modernen Browsern unterstützt, sind in die CSS-Kaskade integriert und lassen sich leichter per JavaScript steuern (anhalten, umkehren). SMIL: ist im SVG-Markup enthalten, funktioniert in statischen SVG-Dateien ohne Zugriff auf CSS und ist deklarativ sowie ausdrucksstark bei Animationen entlang von Pfaden.

Animieren Sie den Übergang zwischen zwei Pfadformen: Die Pfade müssen dieselbe Anzahl von Befehlen und eine kompatible Struktur haben. Die CSS-Animation animiert die Eigenschaft d (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } für natives Pfad-Morphing mit CSS.

Fügen Sie eine prefers-reduced-motion-Media-Query hinzu, um SVG-Animationen für Personen, die Bewegung als unangenehm empfinden, zu deaktivieren oder zu vereinfachen. Dekorative Animationen sollten vollständig deaktiviert werden; bedeutungsvolle Animationen wie Ladezustände sollten vereinfacht und nicht vollständig angehalten werden.

Wie erzeugt die Technik mit stroke-dasharray und stroke-dashoffset eine Animation, bei der ein Pfad gezeichnet wird?

SVG-Animationen verwenden CSS-Übergänge und Keyframes für eigenschaftsbasierte Effekte, die Technik mit stroke-dasharray/dashoffset für Zeicheneffekte bei Pfaden, SMIL animate/animateTransform/animateMotion für deklarative Animationen innerhalb des SVGs sowie prefers-reduced-motion für Barrierefreiheit. CSS und SMIL ergänzen sich – wählen Sie je nachdem, ob das SVG in die CSS-Kaskade integriert werden oder als eigenständige Datei portierbar sein soll.