两帧SVG动画：最后一帧需要指定两次吗？

问题描述

我想在两帧之间进行一次平滑的过渡。动画应该在最后一帧停止。这按预期工作：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="50%" height="50%">
          <path d="M100 200 c-50,-100 150,-100 200,0" stroke="#000000" stroke-width="4" fill="none">
            <animate
                     dur="2"
                     attributeName="d"
                     values="M100 200 c50,-100  250,0; M100 200 c-50,0"
                     keySplines="0.5 0.5 0.5 0.5">
            </animate>
          </path>
</svg>

但是，我需要指定最后一帧路径两次：第二次在 d 标记中。否则，图像最终会消失。任何纯 SVG 方法可以在每帧只指定一次的情况下制作这样的动画？

解决方法

也许是这样。我颠倒了路径，因此初始状态是基值，并添加了 fill="freeze" 以在完成后保留动画状态。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="100%" height="100%">
          <path d="M100 200 c50,-100  250,-100 200,0" stroke="#000000" stroke-width="4" fill="none">
            <animate
                     dur="2"
                     attributeName="d"
                     to="M100 200 c-50,-100 150,0" fill="freeze">
            </animate>
          </path>
</svg>

svg svg-animate