Can svg animations be suspended without loosing accumulative information?

Question

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…

Accepted Answer

It's not valid to animate a transform with the animate element, you must use animateTransform. See http://www.w3.org/TR/SVG/animate.html#AnimationAttributesAndProperties

You should report your testcase to Opera if it animates with that UA.

```
  <animateTransform
    attributeName="transform" attributeType="XML"
    type="rotate"
    begin="startbox.click" dur="1s" end="endbox.click"
    from="0" to="360"
    additive="sum"
    accumulate="sum"
    fill="freeze"
    repeatCount="indefinite"
  />
```

As to the question asked, you can pause animations using javascript but with SVG 1.1 you can't do it declaratively as far as I know.

Can svg animations be suspended without loosing accumulative information?

Solution

Problem