keyPoints

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 keyPoints-Attribut gibt die einfache Dauer einer Animation an.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

html
<svg
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <path
    d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
    stroke="lightgrey"
    stroke-width="2"
    fill="none"
    id="motionPath" />
  <circle cx="10" cy="110" r="3" fill="lightgrey" />
  <circle cx="110" cy="10" r="3" fill="lightgrey" />

  <circle r="5" fill="red">
    <animateMotion
      dur="3s"
      repeatCount="indefinite"
      keyPoints="0;0.5;1"
      keyTimes="0;0.15;1"
      calcMode="linear">
      <mpath href="#motionPath" />
    </animateMotion>
  </circle>
</svg>

Anmerkungen zur Verwendung

Wert <number> [; <number>]* ;?
Standardwert Keiner
Animierbar Nein
<number> [; <number>] ;?

Dieser Wert definiert eine durch Semikolons getrennte Liste von Gleitkommawerten zwischen 0 und 1 und gibt an, wie weit sich das Objekt zum angegebenen Zeitpunkt entlang des Bewegungsweges bewegen soll, der durch den entsprechenden keyTimes-Wert angegeben ist. Die Distanz wird entlang des durch das path-Attribut bestimmten Pfades berechnet. Jeder Fortschrittswert in der Liste entspricht einem Wert in der keyTimes-Attributliste.

Wenn eine Liste von Schlüsselpunkten angegeben ist, muss es genau so viele Werte in der keyPoints-Liste geben wie in der keyTimes-Liste.

Wenn am Ende des Wertes ein Semikolon steht, das optional von Leerzeichen gefolgt wird, werden sowohl das Semikolon als auch die nachfolgenden Leerzeichen ignoriert.

Wenn es irgendwelche Fehler in der Wertspezifikation gibt (z. B. schlechte Werte, zu viele oder zu wenige Werte), dann ist das ein Fehler.

Spezifikationen

Specification
SVG Animations Level 2
# KeyPointsAttribute

Browser-Kompatibilität