html - 重启整个 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 值 = 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"/>