Referenz:SVG/Attribute/keyTimes
Aus SELFHTML-Wiki
< Referenz:SVG | Attribute
Attribut | keyTimes |
---|---|
Beschreibung | Mit der Eigenschaft keyTimes 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 | |
animierbar | nein |
anwendbar auf | animate, animateMotion (Unterschied Tag Element Attribut) |
Browsersupport | |
Spezifikation | ![]() |
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. |