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