重新启动整个SVG animateTransform序列？

Question

我有一个要通过animateTransform制作动画的SVG图形。它会进行动画处理，然后一直停留在屏幕上，直到您单击它为止，然后缩放到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值= 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();