我正在使用SVG来显示链式动画（每个路径在前一个路径完成后自动启动）并设法使其正常工作。我甚至在“刷新”元素中工作，重置动画链。
我的问题是，我想提供一种“跳过”动画的方法。很容易添加一个触发<set>元素的元素来显示没有动画的路径，但是这并不会停止动画链，它会不断地遍历每个元素（重置并重新绘制它们）。
我需要 WebKit支持的方式来停止链式SVG动画......
我尝试的事情：
在由end触发的<animate>元素上设置skip.click属性：停止当前笔划的动画，但仍会触发end个事件，因此不会阻止链条。
将begin属性设置为indefinite并手动触发每个路径末尾的下一个路径的动画。但是，这需要能够在onend元素中<animate>执行代码，而WebKit显然还不支持。
找到任何方法来停止正在进行的动画（不触发end事件），但是当前版本的SVG的引用似乎没有给出任何（我已经看到它被列为要解决的问题，在关于起草SVG / SMIL未来版本的演示文稿中。
我希望有人为这个问题找到某种解决方法。我想我不能成为第一个想要一个带有'重启'和'跳过'按钮的动画链的人......
作为参考，这里是我正在使用的SVG代码类型的简化示例（由程序即时生成，因此可能不那么紧凑）：
<svg width="220" height="220" viewBox="0 0 109 109" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full">
<path d="M33.28,19.04c1.84,0.71,3.7,0.86,5.4,0.63c4.95-0.67,27.95-4.58,29.86-4.92c3.46-0.62,4.06,1.36,2.11,3.58c-1.95,2.22-11.41,13.17-16.35,17.19" style="fill:none;stroke:rgb(230,71,71);stroke-width:3" stroke-dasharray="67.00,67.00" stroke-dashoffset="67.00" stroke-linecap="round">
<animate id="step0" attributeName="stroke-dashoffset" values="67.00;0" dur="1.3s" begin="0.10;refresh.click+0.01" fill="freeze" keySplines="0.5 0 0.5 1" calcMode="spline" />
<set attributeName="stroke-dashoffset" to="67.00" begin="refresh.click" />
</path>
<path d="M52.48,37.74c6.42,2.97,11.75,30.73,5.24,52.57c-2.8,9.38-8.09,2.96-10.47,0.99" style="fill:none;stroke:rgb(230,71,71);stroke-width:3" stroke-dasharray="70.00,70.00" stroke-dashoffset="70.00" stroke-linecap="round">
<animate id="step1" attributeName="stroke-dashoffset" values="70.00;0" dur="1.4s" begin="step0.end+0.1s" fill="freeze" keySplines="0.5 0 0.5 1" calcMode="spline" />
<set attributeName="stroke-dashoffset" to="70.00" begin="refresh.click" />
</path>
<path d="M12.25,51.48c3.75,1.14,8.79,1.03,12.48,0.49c16.77-2.47,42.86-5.84,58.53-6.75c4.26-0.25,9.11-0.34,13.11,0.57" style="fill:none;stroke:rgb(230,71,71);stroke-width:3" stroke-dasharray="85.00,85.00" stroke-dashoffset="85.00" stroke-linecap="round">
<animate id="step2" attributeName="stroke-dashoffset" values="85.00;0" dur="1.7s" begin="step1.end+0.1s" fill="freeze" keySplines="0.5 0 0.5 1" calcMode="spline" />
<set attributeName="stroke-dashoffset" to="85.00" begin="refresh.click" />
</path>
<g id="skipAnimation" visibility="visible"> <set attributeName="visibility" begin="step2.end" end="refresh.click" to="hidden"/>
<text id="skip" x="95" y="105" stroke="#AAA" stroke-width="0.5" style="font-size:11px;">➠</text>
</g>
<g id="animationDone" visibility="hidden"> <set attributeName="visibility" begin="step2.end" end="refresh.click" to="visible"/>
<text id="refresh" x="95" y="105" stroke="#AAA" stroke-width="0.5" style="font-size:11px;">↻</text>
</g>
</svg>