animation - SVG动画在完成后放回

Question

我刚刚使用 SVG 标签组中的标签“animate”制作了一个简单的 SVG 动画。它工作得很好，但在动画完成后，它会回到开头，回到初始帧，然后停止。

我应该如何修改animate标签内的代码以使动画保持在最后一帧？谢谢，

标签： animationsvgjquery-animate

Answer 1

我应该如何修改 animate 标签内的代码以使动画保持在最后一帧？

要实现这一点，请使用fill="freeze"属性

下面是一个没有fill =" freeze "
在您的描述中使用 As 的示例 - 该图返回其原始状态

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="400" height="200" viewBox="0 0 400 200" style="border:1px solid gray;" >   
    
    <circle cx="30" cy="100" r="30" fill="purple" >
        <animate attributeName="cx" begin="svg1.click" dur="3s" values="30;300" />
    </circle>
</svg>   

第二个例子使用fill =" freeze " 动画结束后，形状将保留在动画的最后一帧。

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="400" height="200" viewBox="0 0 400 200" style="border:1px solid gray;" >   
    
    <circle cx="30" cy="100" r="30" fill="purple" >
        <animate attributeName="cx" begin="svg1.click" dur="3s" values="30;300" fill="freeze" />
    </circle>
</svg>