javascript - 如何使用 JavaScript 为 SVG 路径设置动画

Question

有没有一种方法可以为以下 svg 路径的“d”属性设置动画？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="theEl" d="M0 0, L 0 500, L 600 500, L 600 0" stroke="black" stroke-width="10"/>
</svg>

如果我想改变它，我知道这就足够了：

document.getElementById('theEl').setAttribute( 'd', 'M0 0, L 0 200, L 200 200, L 600 0' );

但是如果我们想让它动画/变形呢？假设我有一个按钮，点击它会在这两条路径之间切换。

我已经看到了一些关于它的答案，他们建议创建一个 SVG 动画元素，然后将其添加到 svg DOM 元素中。但这意味着每次单击按钮时，我们都需要附加/删除该动画元素，对吗？没有更简单的方法吗？不使用任何 svg 库？非常感谢！

Answer 1

只需静态创建 SMIL 动画，即作为路径的子标记，并在单击按钮时运行它。

<animate begin="click" ...

Answer 2

您可以直接将动画元素添加到 svg 中，无需编写脚本。

有关简洁示例和更多详细信息，请参阅Tavmjong Bah 的这篇博文。