<animateMotion>

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

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

Hinweis: Um einen vorhandenen Pfad wiederzuverwenden, ist es notwendig, ein <mpath>-Element innerhalb des <animateMotion>-Elements zu verwenden, anstatt das path-Attribut.

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 für jeden zugehörigen Wert in keyTimes entlang des Pfades ist. Werttyp: <number>*; Standardwert: keiner; Animierbar: nein
path: Dieses Attribut definiert den Bewegungspfad und verwendet dieselbe Syntax wie das d-Attribut. Werttyp: <string>; Standardwert: keiner; Animierbar: nein
rotate: Dieses Attribut definiert eine Rotation, die auf das entlang eines Pfades animierte Element angewendet wird, meist um es in 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-Attribute: begin, dur, end, min, max, restart, repeatCount, repeatDur, fill
Animationswert-Attribute: calcMode, values, keyTimes, keySplines, from, to, by
Weitere Animationsattribute: Besonders bemerkenswert: attributeName, additive, accumulate
Animation Ereignis-Attribute: Besonders bemerkenswert: onbegin, onend, onrepeat

DOM-Schnittstelle

Dieses Element implementiert die SVGAnimateMotionElement-Schnittstelle.

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>

Spezifikationen

Spezifikation
SVG Animations Level 2 # AnimateMotionElement

Browser-Kompatibilität

Siehe auch

<mpath>

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden