是否重新启动整个SVG animateTransform序列？

Question

我有一个SVG图形，我是通过animateTransform动画。它会在屏幕上设置动画，然后一直显示在屏幕上，直到您单击它，然后它会缩小到0并且无法恢复。我想做的是在最后一个动画结束(缩放到0)后2秒内重新开始整个动画序列，这样它就会重新开始动画。

我该怎么做呢？谢谢!

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

我们需要在onclick动画结束后的时间0和2秒开始第一个转换，这会得到begin="0s;animatFinished.end+2s"

第二个动画需要在第一个动画结束时开始，否则它只会触发一次。

additive="sum“的使用给你带来了问题，因为动画最终会试图向比例为0的对象添加比例，而当比例为0 x value =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"/>

Answer 2

获取要重新启动的animateTransform元素并使用beginElement()方法

const animateEl = document.querySelector("#animatFinished");
animateEl.beginElement();