如何阻止SVG缩放动画结束后重置状态

问题根源在于SVG的SMIL动画（你使用的animateTransform属于这类）默认在结束后会恢复元素的初始状态——这是因为animateTransform默认的fill属性值为remove，动画结束后会移除所有动画效果。

解决方案 #

给animateTransform元素添加fill="freeze"属性，即可让动画结束后保持最后一帧的状态。

修改后的完整SVG代码：

<svg
    width="16"
    height="16"
    viewBox="0 0 8.4666665 8.4666666"
    version="1.1"
    id="navCircle1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
    <g>
        <animateTransform
            attributeName="transform"
            attributeType="XML"
            type="scale"
            calcMode="linear"
            values="1 1;1.5 1.5"
            keyTimes="0;1"
            dur="0.1s"
            repeatCount="1"
            restart="always"
            begin="indefinite"
            fill="freeze"/> <!-- 新增该属性 -->
        <circle
           style="stroke-width:1;stroke-linecap:round;stroke:none"
           id="path358"
           cx="4.2333331"
           cy="4.2333331"
           r="3" />
    </g>
</svg>

补充说明 #

你之前尝试的CSS属性animation-fill-mode: forwards对SMIL动画无效，因为这是CSS动画专属的控制属性。SVG的SMIL动画有独立的属性体系，fill就是专门控制动画结束后状态的属性，常见取值：

• remove：默认值，动画结束后恢复元素初始状态
• freeze：动画结束后保持最后一帧的状态

内容的提问来源于stack exchange，提问作者Sh4lidar