Referenz:SVG/Attribute/calcMode

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Attribut calcMode
Beschreibung legt fest, wie die Zwischenschritte der Animation berechnet werden
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 einzelnen Ü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 calcMode attribute
Beispiel
<circle cx="100" cy="190" r="40" fill="red">
      <animate attributeName="r" 
               begin="0s" dur="9s" 
               calcMode="discrete" values="10; 70; 90" 
      />
</circle>

Da das calcMode-Attribut den Wert discrete hat, verläuft die Animation ruckartig.

Beachten Sie
Tipp