SVG/Element/animate

Aus SELFHTML-Wiki
< SVG‎ | Element
Wechseln zu: Navigation, Suche

Das animate-Element ist das Grundelement für die Animation mit SMIL. Mit dem animate-Element können Sie alle der als animierbar gekennzeichneten Attribute, wie etwa Koordinaten, Längen, Breiten oder Farben, animieren.

Syntax
Start-Tag: notwendig
End-Tag: ggf. notwendig
Elternelemente
Darf vorkommen in:
grafischen Elemente
erlaubte Inhalte
desc, metadata, title
Attribute
Name Inhalt Standardwert Bedeutung
attributeName CDATA legt fest, welche Eigenschaft animiert werden soll
attributeType auto
XML
CSS
auto legt fest, ob die Eigenschaft als XML-Attribut oder Stil-Attribut animiert werden soll
fill remove: Objekt wird in den Ursprungszustand versetzt
freeze: Ende der Animation wird dargestellt
remove legt fest, wie das Objekt nach Ablauf der Animation dargestellt werden soll
from legt Anfangswert des zu animierenden Attributs fest
to legt Endwert des zu animierenden Attributs fest
dur nicht negative Zeitangabe
indefinite: unendlich, wird immer wieder wiederholt.
legt den Beginn einer Animation fest
repeatCount NUMBER 1 legt fest, wie oft die Animation wiederholt werden soll

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel
<ellipse cx="100" cy="100" rx="50" ry="50" fill="var(--red)">
	<animate 
		attributeName="ry" 
		to="100" 
		dur="3s"
	/> 
</ellipse>
Das eigentlich inhaltsleere ellipse-Element erhält als Kind-Element ein animate-Element. Das attributeName-Attribut erhält als Wert die zu animierende Eigenschaft.


Siehe auch

Weblinks