Interrupting chained animation in SVG (using Webkit)

Question

Interrupting chained animation in SVG (using Webkit)

I have been using SVG to display the attached animations (each path automatically starts when the previous path is completed) and managed to get it working fine. I even worked on a "refresh" element that resets the animation chain.

My problem is that I want to provide a way to "skip" the animation. It's easy to add an element that triggers the elements <set>

to show paths without animating, however this does not stop the animation chain from continuing to move through each element (overwriting and redrawing them).

I need a WebKit supported way to stop a chained SVG animation ...

Things I've tried:

Setting an attribute end

on an element <animate>

that is triggered with skip.click

: stops the animation of the current stroke, but still fires end

events and therefore does not stop the chain.
Setting attributes begin

to indefinite

and manually enabling animation of the next path at the end of each path. However, this will require the ability to execute code on onend

an element <animate>

, which is apparently not yet supported by WebKit.
Looking for any way to stop the current animation (without triggering an event end

), but links to current SVG versions don't seem to give (I saw this listed as a problem to solve in the presentation on developing future SVG / SMIL versions).

I was hoping someone had come up with a workaround for this problem. I suppose I shouldn't be the first person to have a chain of animations with "restart" and "skip" buttons ...

For reference, here's a simplified example of the type of SVG code I'm using (generated on the fly by the program, perhaps not as compact as it might be):

<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;">➠</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;">↻</text>
    </g>
</svg>