Jetzt bin ich auf den Geschmack gekommen – endlich! Schlanke Animationen von SVG-Grafiken mit SMIL. Ein sehr schöner Beitrag auf meiner Lieblings-Lern-Website CSS-Tricks hat mir geholfen.
Mein erster Versuch:
Die SVG-Grafik ist hier nur der I-Punkt.
Und so sieht der Code dazu aus:
<svg width="200" height="50">
<circle id="red-circle" r="3" cx="161" cy="3" fill="#e31b11" />
<animate
xlink:href="#red-circle"
attributeName="cy"
values=" 1; 15; 1; 15; 4; 15; 6; 15; 8; 15; 8; 15; 8; 15"
keyTimes="0; 0.15; 0.3; 0.35; 0.4; 0.5; 0.6; 0.7; 0.75; 0.8; 0.85; 0.9; 0.95; 1"
dur="1s"
begin="0s; 5s; 9s; 17s;"
end="2s; 8s; 15s; 25s;"
fill="freeze"
restart="whenNotActive"
id="circ-anim"/>
</svg>
Links zum Lernen:
CSS-Tricks
Learning SVG
Dokumentation auf W3 zu SVG Animate