Can svg animations be suspended without loosing accumulative information?

bitmask picture bitmask · Oct 2, 2012 · Viewed 9k times · Source

You can stop and repeat animations without limitations, but if you restart an indefinite animation it will loose its accumulative value and start from the initial value.

Maybe I should clarify with an example; Take this animation:

  <animate id="main"
    attributeName="transform" attributeType="XML"
    begin="startbox.click" dur="1s" end="endbox.click"
    from="rotate(0)" to="rotate(360)"
    additive="sum"
    accumulate="sum"
    fill="freeze"
    repeatCount="indefinite"
  />

If I stop this animation, and start a different one (say id="second") that affects the same object's rotation, second will perfectly continue from the point where main left off. But if I start this one by clicking the startbox (or by any other event really) it will subtract all the difference made by main and reset the rotation before starting.

What I want to have is a proper "pausing", where I can continue where the animation stopped previously. Of course, I could add a fixed number of identical animations and the same number of identical start/stop buttons to emulate the effect, but that is not a good solution. Especially since the number of pauses is limited.


Whole example (only seems to work in Opera)

Answer

john ktejik picture john ktejik · Oct 13, 2014

It is built into SVG

 SVGRoot.pauseAnimations();