animationsvgchained

SVG stop running chained animation (<animate> tag)

I have an animated SVG where each <path> starts after its previous <path>. The first <path> starts on click or 0s.
I have a problem with stopping the animation (without JS, only in XML). I press click, the animation starts. Before the entire animation ends I press click and trigger a new animation. However the previous animation continues to run and it messes up all <path>s starting from 2.
I have tried different options (begin with time offsets; begin with id.end), but I haven't found a solution. Maybe someone who is more experiences with SVG than me could help me?

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>

And here is the problem:
So, on the picture it's clear that the chained animation is not stopped when I click the pictue :(
enter image description here

Solution

  • Instead of chaining animations off one another, have all the animations begin="0s; 3005.click". Then they will all reset when you click.

    You can use keyPoints and keyTimes, to control when each of the animations starts. So you can still have your staggered starts.

    <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>