如何使SVG矩形动画停止在动画结束位置？

你的问题出在SVG <animate> 元素的默认行为上——动画结束后会自动把属性重置为初始值。要让矩形停在动画结束时的宽度（700），只需要给 <animate> 添加 fill="freeze" 属性即可。

修改后的代码如下：

<rect class="st1" x="90" y="5" width="200" height="169">
  <animate
    attributeName="width"
    begin="0s"
    dur="12s"
    from="200"
    to="700"
    keySplines="
      0.1 0.2 0.2 1;
      0.1 0.2 0.2 1;
      0.1 0.2 0.2 1;
      0.1 0.2 0.2 1;
      0.1 0.2 0.2 1;
      0.1 0.2 0.2 1"
    keyTimes="0;0.22;0.33;0.55;0.66;0.88;1"
    calcMode="spline"
    repeatCount="1"
    fill="freeze" /> <!-- 新增的属性 -->
</rect>

fill="freeze" 的作用是让动画在结束后保持最后一帧的属性值，不会回退到初始状态。

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