Besuchen Sie unseren Adventskalender 2022!

SVG/Elemente/animateMotion

Aus SELFHTML-Wiki
< SVG‎ | Elemente
Wechseln zu: Navigation, Suche

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

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