3

我正在使用 SVG 显示链式动画（每个路径在前一个路径完成时自动启动）并设法使其正常工作。我什至在重置动画链的“刷新”元素中工作。

我的问题是我想提供一种“跳过”动画的方法。添加一个元素来触发元素以显示没有动画的路径很容易<set>，但这不会停止动画链，它会继续遍历每个元素（重置和重新绘制它们）。

我需要一种支持 WebKit 的方式来停止链接的 SVG 动画......

我尝试过的事情：

  • 在由 : 触发的元素上设置end属性会停止当前笔画的动画，但仍会触发事件，因此不会停止链。<animate>skip.clickend

  • 将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;">➠&lt;/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;">↻&lt;/text>
    </g>
</svg>
4

0 回答 0