<animateMotion>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das <animateMotion> SVG Element bietet eine Möglichkeit, zu definieren, wie sich ein Element entlang eines Bewegungspfades bewegt.

Hinweis: Um einen bestehenden Pfad wiederzuverwenden, ist es notwendig, ein <mpath> Element innerhalb des <animateMotion> Elements anstelle des path Attributs zu verwenden.

Beispiel

html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion
      dur="10s"
      repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

Verwendungskontext

KategorienAnimationselement
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
Beschreibende Elemente
<mpath>

Attribute

keyPoints

Dieses Attribut gibt im Bereich [0,1] an, wie weit das Objekt entlang des Pfades für jeden mit keyTimes assoziierten Wert ist. Wertetyp: <number>*; Standardwert: keiner; Animierbar: nein

path

Dieses Attribut definiert den Pfad der Bewegung, unter Verwendung der gleichen Syntax wie das d Attribut. Wertetyp: <string>; Standardwert: keiner; Animierbar: nein

rotate

Dieses Attribut definiert eine Rotation, die auf das entlang eines Pfades animierte Element angewendet wird, normalerweise um es in die Richtung der Animation zu zeigen. Wertetyp: <number>|auto|auto-reverse; Standardwert: 0; Animierbar: nein

Hinweis: Für <animateMotion> ist der Standardwert für das calcMode Attribut paced.

Animationsattribute

Nutzungshinweise

Dieses Element implementiert die SVGAnimateMotionElement Schnittstelle.

Spezifikationen

Specification
SVG Animations Level 2
# AnimateMotionElement

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animateMotion
calcMode
fill
href
keyPoints
origin
path
rotate
systemLanguage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch