Thomas J.S.: SVG mit Pingpong-Effekt

Beitrag lesen

Hallo Sabina,

Ich habe meine erste SVG-Grafik zum "zappeln" gebracht , aber es gibt ein Problem. ich habe eine große gelbe Ellipse vor der ein schwarzer Ball immer größer und kleiner werden kann, derzeit gibt es zwei animationen: die erste beginnte bei 0s und sorgt für das größer werden die zweite beginnt nach 5s (Dauer der ersten Animation), wenn ich aber beide auf unendliche Wiederholung stelle, gibt es nach dem ersten Durchlauf keine Verzögerung mehr zwischen beiden und nur noch die zweite Animation (das Schrumpfen) wird angzeigt. Gibt es eine Möglichkeit den schwarzen Kreis kontinuierlich wachsen und schrumpfen zu lassen?

Ich würde hier satt die zweite Ellipse einen Kreis nehmen:

<circle id="pupil" cy="111px" cx="322px" r="0px" style="stroke: #000000; fill: #000000">
<animate id="p1" attributeName="r" attributeType="XML" begin="0; p2.begin+5s" dur="5s" fill="freeze" from="0" to="47" />
<animate id="p2" attributeName="r" attributeType="XML" begin="p1.begin+5s" dur="5s" fill="freeze" from="47" to="0"  />
</circle>

Grüße
Thomas