SVG停止運行鏈式影片（<animate>標簽）

我有一個影片SVG其中每個<path>開始后以前的<path>。第一個<path>從單擊或 0 開始。
我在停止影片時遇到問題（沒有 JS，只有在 XML 中）。我按一下，影片開始。在整個影片結束之前，我按下 click 并觸發一個新影片。但是，之前的影片繼續運行，并且<path>從 2 開始將所有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>

這就是問題所在：
所以，在圖片上很明顯，當我單擊圖片時，鏈接的影片并沒有停止:(

uj5u.com熱心網友回復：

不要將影片相互鏈接，而是擁有所有影片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 链式

上一篇：GODOT-全攻擊影片未播放

下一篇：不能關閉一個視窗并保持其他打開