SVG/Element/animateMotion

Das animateMotion-Element ermöglicht es, Objekte entlang eines vordefinierten Pfades laufen zu lassen.

Syntax

Start-Tag: notwendig

End-Tag: ggf. notwendig

Elternelemente

Darf vorkommen in:
*grafische Elementen

• use

erlaubte Inhalte

mindestens ein mpath,
desc, metadata, title

Attribute

Name	Inhalt	Standardwert	Bedeutung
calcMode	discrete, linear, paced, spline	none	legt fest, wie die Zwischenschritte der Animation berechnet werden
keyPoints	CDATA		gibt Punkte zu keyTimes-Attribut an
origin	CDATA
path	CDATA		Pfadangabe
rotate	NUMBER		Winkelmaß der Rotation

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

<circle id="ball">
	<animateMotion 
           dur="3s" repeatCount="indefinite"
           path="m 0,0 c -200,0 29.9,398.2 129.9,225 100,-173.2 -359.8,-173.2 -259.8,0 100,173.2 z"/>
</circle>

Empfehlung: Pfad-Animationen waren lange ein Alleinstellungsmerkmal von SMIL. Um vergleichbare Animationen auch mit CSS realisieren zu können, führte Chrome die CSS-Eigenschaft motion-path ein, die mittlerweile unter dem Namen offset-path standardisiert ist.

Siehe auch

• SMIL/animateMotion

Weblinks

• W3C: AnimateMotionElement