SVG/Elemente/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.

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

Start-Tag: notwendig End-Tag: ggf. notwendig <animate /> <animate>   <!-- Kindelement(e) --> </animate>
Elternelemente	Darf vorkommen in: grafischen Elementegrafischen Elemente Information: grafische Elemente (SVG) Elemente, die dazu führen, dass etwas gezeichnet wird Elemente: circle, ellipse, foreignObject, image, line, path, polygon, polyline, rect, text, use use
erlaubte Inhalte	desc, metadata, title
Browsersupport	Details: {{{caniuse}}}

Attribute

Name	Inhalt	Standardwert	Bedeutung
Kernattribute
class	ID		ordnet ein Element einer oder mehreren Klassen zu.
id	ID		identifiziert ein einziges Element innerhalb eines Dokuments
lang	ID		identifiziert eine Sprachangabe
style	ID	CDATA	Stilangabe durch Präsentationsattribute
tabindex	ID		macht Element „antabbbar“
xml:base	CDATA		Basis-URL
xml:lang		Sprachkürzel	legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766]
xml:space		default, preserve	Verhalten gegenüber whitespace)
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