SVG/Element/animate

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

• use

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

• SMIL#Einbindung

Weblinks

• W3C: AnimateElement