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 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)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Click example</desc>
  <g>
    <rect id="startbox"
      x="10" y="10"
      width="20" height="20"
      stroke="none" fill="green"
    />
    <rect id="endbox"
      x="10" y="40"
      width="20" height="20"
      stroke="none" fill="red"
    />
    <g transform="translate(200,200)">
    <rect
      x="0" y="0"
      width="50" height="5"
      stroke="#10e9f3" fill="#30ffd0"
    >
      <animate
        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"
      />
    </rect>
    </g>
  </g>
</svg>

Answer 1

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.