Referenz:SVG/Attribute/keySplines

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Attribut keySplines
Beschreibung legt fest, wie die Geschwindigkeit der Animation abläuft
erlaubte Werte

Kontrollpunkte in der Form x1; y1; x2; y2 mit dem Wert zwischen 0 und 1

default-Wert none
animierbar nein
anwendbar auf animate, animateMotion (Unterschied Tag Element Attribut)
Browsersupport
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Spezifikation W3c logo klein.gif keySplines attribute
Beispiel
<animate 
    xlink:href="#orange-circle"
    attributeName="cy"
    from="50"
    to="250" 
    dur="3s"
    begin="click"
    values="50; 250; 120;250; 170; 250; 210; 250"
    keyTimes="0; 0.15; 0.3; 0.45; 0.6; 0.75; 0.9; 1"
    keySplines=".42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;"
    fill="freeze" 
    id="circ-anim"/>

Für die einzelnen keyTimes-Attributwerte sind je 4 keySplines-Werte definiert, die den Kreis hüpfen lassen.

Beachten Sie
Tipp