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

Question

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

<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,-100 200,0; M100 200 c-50,-100 150,-100 200,0"
                     keySplines="0.5 0.5 0.5 0.5">
            </animate>
          </path>
</svg>

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

Answer 1

也许像这样。我反转了路径，因此初始状态是基值，并添加了 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,-100 200,0" fill="freeze">
            </animate>
          </path>
</svg>

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

Two-frame SVG animation: do the last frame need to be specified twice?

svg

svg-animate