Перезапустить всю последовательность SVG animateTransform?

Question

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

Как это сделать? Благодаря!

<!-- Keep scaled at 0 on load --> 
<animateTransform 
    attributeName="transform" 
    attributeType="XML" 
    type="scale" 
    from="0" 
    to="0" 
    dur="0.5s"/> 
<!-- Scale up after 0.5 seconds --> 
<animateTransform 
    attributeName="transform" 
    attributeType="XML" 
    type="scale" 
    from="0" 
    to="1" 
    begin="0.5s"  
    dur="0.3s" 
    fill="freeze" 
    additive="sum"/> 
<!-- Scale down on click --> 
<animateTransform id="animatFinished" 
    attributeName="transform" 
    attributeType="XML" 
    type="scale" 
    from="1" 
    to="0" 
    begin="click" 
    dur="0.6s" 
    fill="freeze" 
    additive="sum"/> 

Answer 1

Мы должны начать первое преобразование как в момент времени 0 и 2 секунды после того, как OnClick анимация закончилась, который дает нам begin="0s;animatFinished.end+2s"

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

А использование добавки = «сумма» дает вам проблемы, как анимация в конечном итоге пытается добавить шкалу к чему-то, который имеет шкалу 0, которая не делает ничего, как 0 значению х = 0.

Так , Я думаю, что это именно то, что вы ищете:

<!-- Keep scaled at 0 on load --> 
<animateTransform id="one" 
    attributeName="transform" 
    attributeType="XML" 
    type="scale" 
    from="0" 
    to="0" 
    begin="0s;animatFinished.end+2s" 
    dur="0.5s" 
    fill="freeze"/> 
<!-- Scale up after 0.5 seconds --> 
<animateTransform 
    attributeName="transform" 
    attributeType="XML" 
    type="scale" 
    from="0" 
    to="1" 
    begin="one.end" 
    dur="0.3s" 
    fill="freeze"/> 
<!-- Scale down on click --> 
<animateTransform id="animatFinished" 
    attributeName="transform" 
    attributeType="XML" 
    type="scale" 
    from="1" 
    to="0" 
    begin="click" 
    dur="0.6s" 
    fill="freeze"/>