SVG/Elemente/animateMotion

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

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

Syntax	Start-Tag: notwendig End-Tag: ggf. notwendig <animateMotion /> <animateMotion>   <!-- Kindelement(e) --> </animateMotion>
Elternelemente	Darf vorkommen in: grafische Elementengrafische Elementen 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	mindestens ein mpath, 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)
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