Index Prev Next

SVG - Animationen

Für einfache Animationen werden Attributwerte (atributeName) oder Eigenschaften (atributeType) über eine bestimmte Zeitdauer hinweg verändert. Die Zeit der Animation wird durch die Attribute begin (Startzeit nach Öffnen des Browserfenserts), end (Endzeit nach öffnen des Fensters) und dur (Dauer der Animation) festgelegt.
Mit repeatDur(Zeitraum der Wiederholung) und repeatCount (Anzahl der Wiederholungen) kann eine Animation auch zeitlich begrenzt werden.
Die Werte werden mit den Attributen from (Ausgangswert), to (Zielwert), by (Schrittgrösse) oder values (alle Zwischenwerte durch Semikolon getrennt) manipuliert.
Beispiel: Mit calcMode kann man den Ablauf der nichtdefinierten Zwischenschritte beeinflussen.
Beispiel:

Mit dem Element animateColor können die Farbwerte von Objekten verändert werden.
Beispiel: Mit animateMotion können Objekt entlang vordefinierter Pfade bewegt werden.
Beispiel: Mit dem Attribut rotate kann die Lage des Objektes bezüglich des Pfades festgelegt werden.
Beispiel:

Index Prev Next