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 |  keyTimes attribute
|
| 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. |
