如何使用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' );

但是，如果我們希望它動畫/變形怎么辦？ 假設我有一個按鈕，單擊該按鈕可以在這2條路徑之間切換。

我已經看到了幾個答案，他們建議創建一個SVG動畫元素，然后將其添加到svg DOM元素中。 但這意味着每次單擊按鈕時，我們都需要添加/刪除該動畫元素，對嗎？ 有沒有更簡單的方法？ 不使用任何svg庫？ 謝謝一群！

Answer 1

只需靜態創建SMIL動畫即可，即作為路徑的子級作為標記，並在單擊按鈕時使其運行。

<animate begin="click" ...

Answer 2

您可以直接將動畫元素添加到svg中，而無需編寫腳本。

有關整潔的示例和更多詳細信息，請參閱Tavmjong Bah撰寫的此博文。