svg动画可以在不丢失累积信息的情况下暂停吗

Question

您可以无限制地停止和重复动画，但如果重新启动不确定的动画，它将失去其累积值，并从初始值开始。

也许我应该举例说明；以这个动画为例：

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

如果我停止此动画，并启动另一个影响同一对象旋转的动画(如id="second")，second将从main停止的点完美地继续。但如果我通过单击startbox(或任何其他事件)启动此动画，它将减去main产生的所有差异，并在启动前重置旋转。

我想要的是一个合适的"；暂停"；，在那里我可以继续动画之前停止的位置。当然，我可以添加固定数量的相同动画和相同数量的相同开始/停止按钮来模拟效果，但这不是一个好的解决方案。特别是由于暂停次数有限。

---

整个示例(似乎只适用于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

它内置在SVG 中

SVGRoot.pauseAnimations();

Answer 2

使用animate元素为变换设置动画是无效的，必须使用animateTransform。看见http://www.w3.org/TR/SVG/animate.html#AnimationAttributesAndProperties

你应该向Opera报告你的测试用例，如果它与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"
/>

至于所问的问题，您可以使用javascript暂停动画，但据我所知，使用svg1.1，您不能以声明方式暂停动画。