如何使用JavaScript设置SVG路径的动画

是否有一种方法可以设置以下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>

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

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

---

非常感谢

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

<animate begin="click" ...

---

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

有关一个简洁的示例和一些进一步的细节，请参见Tavmjong Bah

<animate begin="click" ...