如何使用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的this blogpost。