Can svg animations be suspended without loosing accumulative information?

问题

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>

回答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.

回答2:

It is built into SVG

 SVGRoot.pauseAnimations();

来源：https://stackoverflow.com/questions/12694045/can-svg-animations-be-suspended-without-loosing-accumulative-information

标签

svg

svg-animate