Прерывание цепной анимации в SVG (с использованием Webkit)

Question

Я использую SVG для отображения связанных анимаций (каждый путь автоматически начинается, когда предыдущий путь завершен) и мне удалось заставить его работать нормально. Я даже работал над элементом "Обновить", который сбрасывает цепочку анимации.

Моя проблема в том, что я хочу предоставить способ "пропустить" анимацию. Легко добавить элемент, который вызывает <set> элементы для отображения путей без анимации, однако это не останавливает цепочку анимации, которая продолжает проходить через каждый элемент (сбрасывать и перерисовывать их).

Мне нужен способ, поддерживаемый WebKit, чтобы остановить сцепленную SVG-анимацию...

Вещи, которые я пытался:

• Настройка end атрибут на <animate> элемент, который запускается skip.click: останавливает анимацию текущего удара, но все еще срабатывает end события и, следовательно, не останавливает цепь.

• Настройка begin приписывает indefinite и ручной запуск анимации следующего пути в конце каждого пути. Однако для этого потребуется возможность выполнения кода на onend в <animate> элемент, который WebKit, видимо, пока не поддерживает.

• Найти любой способ остановить текущую анимацию (не вызывая end событие), но ссылки на текущие версии SVG, похоже, не дают никакого (я видел, что это перечислено как проблема, которую нужно решить, в презентации о разработке будущих версий SVG/SMIL).

Я надеялся, что кто-нибудь нашел решение этой проблемы. Я полагаю, что я не должен быть первым, кто хочет цепочку анимаций с кнопками "перезагрузка" и "пропуск"...

Для справки приведу упрощенный пример типа кода SVG, который я использую (генерируется программой на лету, поэтому, возможно, не настолько компактно, как могло бы быть):

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