SVG 停止运行链接动画(<animate>标签)。

Question

SVG 停止运行链接动画(<animate>标签)。

7

我有一个动态SVG，在其中每个<path>都在前一个<path>之后开始。第一个<path>是通过单击或0s开始的。
我有一个问题，如何在不使用JS（仅使用XML）的情况下停止动画。我点击以启动动画。在整个动画结束之前，我再次点击并触发了新的动画。然而，以前的动画继续运行，并且它混乱了所有从2开始的<path>。
我已尝试了不同的选项（具有时间偏移的begin；带有id.end的begin），但我还没有找到解决方案。也许比我更有经验的SVG专家可以帮助我？

Here is my SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="109" height="109" viewBox="0 0 109 109" id="3005">
<g fill="none" stroke="#666" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
    <g>
        <path d="M50.75,19.5c0.1,1.3,0.37,3.74-0.19,5.21C43.57,43,32.73,60.29,14.5,75.04" />
        <path d="M45,44.35c1.05,0,3.62,0.35,6.26,0.1c9.18-0.85,25.21-3.31,29.06-3.67c4.26-0.4,6.46,4.28,4.68,6.25C78.32,54.46,67.5,67,57.81,79.22" />
        <path d="M42.52,68.33c10.16,5.01,26.25,20.59,28.79,28.38" />
    </g>
</g>
<g fill="none" stroke="#000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
    <g>
        <path d="M50.75,19.5c0.1,1.3,0.37,3.74-0.19,5.21C43.57,43,32.73,60.29,14.5,75.04" stroke-dasharray="67.92" stroke-dashoffset="67.92">
            <animate id="0" attributeName="stroke-dashoffset" values="67.92;0" dur="0.51s" fill="freeze" begin="0s;3005.click" />
        </path>
        <path d="M45,44.35c1.05,0,3.62,0.35,6.26,0.1c9.18-0.85,25.21-3.31,29.06-3.67c4.26-0.4,6.46,4.28,4.68,6.25C78.32,54.46,67.5,67,57.81,79.22" stroke-dasharray="87.4" stroke-dashoffset="87.4">
            <animate attributeName="stroke-dashoffset" values="87.4" fill="freeze" begin="3005.click" />
            <animate id="1" attributeName="stroke-dashoffset" values="87.4;0" dur="0.66s" fill="freeze" begin="0.end" />
        </path>
        <path d="M42.52,68.33c10.16,5.01,26.25,20.59,28.79,28.38" stroke-dasharray="41.01" stroke-dashoffset="41.01">
            <animate attributeName="stroke-dashoffset" values="41.01" fill="freeze" begin="3005.click" />
            <animate id="2" attributeName="stroke-dashoffset" values="41.01;0" dur="0.41s" fill="freeze" begin="1.end" />
        </path>
    </g>
</g>
</svg>

这里出现了一个问题：
从图片中可以清楚地看到，当我点击图片时，链式动画并没有停止 :(

- mihails.kuzmins

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul LeBeau · Accepted Answer

不要将动画链接在一起，将所有动画设置为begin="0s; 3005.click"。这样当你点击时，它们都会重置。

您可以使用keyPoints和keyTimes来控制每个动画的开始时间。因此，您仍然可以拥有交错的启动。

<svg xmlns="http://www.w3.org/2000/svg" width="109" height="109" viewBox="0 0 109 109" id="3005">
<g fill="none" stroke="#666" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
    <g>
        <path d="M50.75,19.5c0.1,1.3,0.37,3.74-0.19,5.21C43.57,43,32.73,60.29,14.5,75.04" />
        <path d="M45,44.35c1.05,0,3.62,0.35,6.26,0.1c9.18-0.85,25.21-3.31,29.06-3.67c4.26-0.4,6.46,4.28,4.68,6.25C78.32,54.46,67.5,67,57.81,79.22" />
        <path d="M42.52,68.33c10.16,5.01,26.25,20.59,28.79,28.38" />
    </g>
</g>
<g fill="none" stroke="#000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
    <g>
        <path d="M50.75,19.5c0.1,1.3,0.37,3.74-0.19,5.21C43.57,43,32.73,60.29,14.5,75.04" stroke-dasharray="67.92" stroke-dashoffset="67.92">
            <animate attributeName="stroke-dashoffset" values="67.92;0" dur="0.51s" fill="freeze" begin="0s;3005.click" />
        </path>
        <path d="M45,44.35c1.05,0,3.62,0.35,6.26,0.1c9.18-0.85,25.21-3.31,29.06-3.67c4.26-0.4,6.46,4.28,4.68,6.25C78.32,54.46,67.5,67,57.81,79.22" stroke-dasharray="87.4" stroke-dashoffset="87.4">
            <animate attributeName="stroke-dashoffset" values="87.4" fill="freeze" begin="3005.click" />
            <animate attributeName="stroke-dashoffset" values="87.4;87.4;0" keyTimes="0;0.444;1" dur="1.17s" fill="freeze" begin="0s;3005.click" />
        </path>
        <path d="M42.52,68.33c10.16,5.01,26.25,20.59,28.79,28.38" stroke-dasharray="41.01" stroke-dashoffset="41.01">
            <animate attributeName="stroke-dashoffset" values="41.01" fill="freeze" begin="3005.click" />
            <animate attributeName="stroke-dashoffset" values="41.01;41.01;0" keyTimes="0;0.75;1" dur="1.58s" fill="freeze" begin="0s;3005.click" />
        </path>
    </g>
</g>
</svg>