Referenz:SVG/Attribute/keyPoints

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Attribut keypoints
Beschreibung gibt Punkte an, die passend zu den zeitlichen Werten des keyTimes-Attribut erreicht werden sollen
erlaubte Werte

Folgende Modi sind möglich:

  • discrete: Im Modus discrete wird ohne fließenden Übergang direkt zwischen 2 Zuständen umgeschaltet.
  • linear: Standardwert für animate, animateTransform und set.

Die Zeit für die einzelnen Schritte bleibt konstant, die Geschwindigkeit kann variieren.

  • paced: Standardwert für animateMotion, Geschwindigkeit bleibt gleich, Dauer der einzelenen Übergänge kann variieren.
  • spline: Animation wird anhand einer Bézier-Kurve interpoliert, die mit der Eigenschaft keySplines festgelegt wurde.
default-Wert none
animierbar nein
anwendbar auf animate, animateMotion (Unterschied Tag Element Attribut)
Browsersupport
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Spezifikation W3c logo klein.gif keyPoints attribute
Beispiel
<animateMotion x:href="wagen" fill="freeze"
  calcMode="linear"    
  dur="5s"
  keyTimes="0;0.33;1"
  keyPoints="0;0.66;1">
  <mpath x:href="#route" />
</animateMotion>

Der Wagen bewegt sich kanonenkugelartig 66% des Weges in einem Drittel der Zeit, dann verlangsamt er seine Geschindigkeit, um das restliche Drittel der Strecke in zwei Drittel der Zeit zurückzulegen.

Beachten Sie

Es müssen genauso viele Werte wie beim keyTimes-Attribut vorhanden sein.

Tipp