Besuchen Sie unseren Adventskalender 2022!
SVG/Elemente/animateMotion
Aus SELFHTML-Wiki
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
Weblinks
- W3C: AnimateMotionElement
Syntax | Start-Tag: notwendig End-Tag: ggf. notwendig <animateMotion /> |
---|---|
Elternelemente | Darf vorkommen in:
grafische Elementengrafische Elementen use
|
erlaubte Inhalte |
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