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

score 15 · Answer 1 · answered Oct 13 '14 at 21:38

15

It is built into SVG

 SVGRoot.pauseAnimations();

answered Oct 13 '14 at 21:38

john k

6,268
4
55
59

11

Note the play function is unpauseAnimations(). I took a while to figure that out. – Leo Oct 31 '14 at 14:14
3

MDN link for SVG DOM interface: https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement – adam Jan 05 '15 at 15:26

Robert Longson · Accepted Answer · 2012-10-02T17:51:47.963

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.

I was originally testing it with `rect.x` but this is easier to see. I'll look into JS, thanks. — bitmask, Oct 02 '12 at 16:42

Can svg animations be suspended without loosing accumulative information?

2 Answers2

Linked