SVG 停止运行链接动画（<animate> 标签）

Question

我有一个动画 SVG，其中每个 <path> 在其前一个 <path> 之后开始。第一个 <path> 从点击或 0 开始。
我在停止动画时遇到问题（没有 JS，仅在 XML 中）。我按下点击，动画开始。在整个动画结束之前，我按下点击并触发一个新的动画。然而，之前的动画继续运行并且它弄乱了从 2.
开始的所有 <path>s 我尝试了不同的选项（begin 带时间偏移；begin 带 id.end），但我还没有找到解决方案。也许比我更熟悉 SVG 的人可以帮助我？

这是我的 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>

问题来了：
所以，在图片上很明显，当我点击图片时，链接的动画并没有停止:(

Answer 1

不要将动画彼此链接起来，而是让所有动画 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>

SVG 停止运行链接动画（<animate> 标签）

SVG stop running chained animation (<animate> tag)

animation

svg

chained

SVG 停止 运行 链接动画（<animate> 标签）

SVG stop running chained animation (<animate> tag)

animation

svg

chained

SVG 停止运行链接动画（<animate> 标签）