SVG/Attribute/keyTimes

Aus SELFHTML-Wiki
< SVG‎ | Attribute
Wechseln zu: Navigation, Suche

Mit dem keyTimes-Attribut können Sie in einer durch Semikola getrennten Liste Werte für die jeweilige Dauer der einzelnen in values festgelegten Schritte angeben.

erlaubte Werte

erster Wert ist immer 0; letzter 1

default-Wert
erlaubt in animate, animateMotion
Beispiel
<animate 
    href="#orange-circle"
    attributeName="cy"
    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.


Siehe auch

Weblinks

Spezifikation (W3C): keyTimes attribute