SVG动画在完成后放回[重复]答案

【问题标题】：SVG Animation puts back after completed [duplicate]SVG动画在完成后放回[重复]
【发布时间】：2021-08-21 14:25:04
【问题描述】：

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

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

【问题讨论】：

标签： animation svg jquery-animate

【解决方案1】：

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

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

以下是不使用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" />
    </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>

【讨论】：