keyTimes

Beispiel

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
      attributeName="cx"
      dur="4s"
      repeatCount="indefinite"
      values="60; 110; 60; 10; 60"
      keyTimes="0; 0.25; 0.5; 0.75; 1" />
    <animate
      attributeName="cy"
      dur="4s"
      repeatCount="indefinite"
      values="10; 60; 110; 60; 10"
      keyTimes="0; 0.25; 0.5; 0.75; 1" />
  </circle>
</svg>

Verwendungshinweise

Der Wert des keyTimes-Attributs ist eine durch Semikolon getrennte Liste von Werten.

Es müssen genau so viele Werte in der keyTimes-Liste vorhanden sein wie in der values-Liste.

Jeder nachfolgende Zeitwert muss größer oder gleich dem vorhergehenden Zeitwert sein.

Die Semantik der keyTimes-Liste hängt vom Interpolation-Modus ab:

• Bei linearen und Spline-Animationen muss der erste Zeitwert in der Liste 0 sein, und der letzte Zeitwert in der Liste muss 1 sein. Der Schlüsselzeitpunkt, der jedem Wert zugeordnet ist, definiert, wann der Wert gesetzt wird; Werte werden zwischen den Schlüsselzeiten interpoliert.
• Bei diskreten Animationen muss der erste Zeitwert in der Liste 0 sein. Die Zeit, die jedem Wert zugeordnet ist, definiert, wann der Wert gesetzt wird; die Animationsfunktion verwendet diesen Wert bis zur nächsten in der Liste definierten Zeit.

Wenn das calcMode-Attribut auf paced eingestellt ist, wird das keyTimes-Attribut ignoriert.

Wenn die Dauer der Animation unbestimmt ist, wird jede keyTimes-Spezifikation ignoriert.

• Safari-Problem: keyTimes-Werte sollten ohne Leerzeichen davor durch Semikolon getrennt werden, z.B.: keyTimes="0; 0.25; 0.5; 0.75; 1"

Spezifikationen