<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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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

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

Beispiel

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

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

Kategorien	Animationselement
Erlaubter Inhalt	Beliebige 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. Werttyp: <number>*; Standardwert: keiner; Animierbar: nein
path: Dieses Attribut definiert den Pfad der Bewegung, unter Verwendung der gleichen Syntax wie das d-Attribut. Werttyp: <string>; Standardwert: keiner; Animierbar: nein
rotate: Dieses Attribut definiert eine Drehung, die auf das entlang eines Pfades animierte Element angewendet wird, normalerweise um es in die Richtung der Animation zu zeigen. Werttyp: <number>|auto|auto-reverse; Standardwert: 0; Animierbar: nein

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

Animationsattribute

Animation timing attributes: begin, dur, end, min, max, restart, repeatCount, repeatDur, fill
Animation value attributes: calcMode, values, keyTimes, keySplines, from, to, by
Andere Animationsattribute: Insbesondere: attributeName, additive, accumulate
Attributanimationen Ereignisse: Insbesondere: onbegin, onend, onrepeat

Verwendungshinweise

Dieses Element implementiert das SVGAnimateMotionElement-Interface.

Spezifikationen

Specification
SVG Animations Level 2 # AnimateMotionElement

Browser-Kompatibilität

Siehe auch

<mpath>