通過javascript動畫SVG路徑

Question

我想通過按鈕點擊動畫svg路徑，但它不起作用。

<svg width="100" height="50"> 
    <path id="path1" d="M 10 10 L 40 20 20 40" fill="none" stroke="blue" stroke-width="2" /> 
</svg> 
<button type="button" id="btn">Change</button> 
<script> 
    var btn = document.getElementById('btn'); 
    btn.onclick = function() { 
     var path = document.getElementById('path1'); 
     var animate = document.createElementNS("http://www.w3.org/2000/svg","animate"); 
     animate.setAttribute('attributeName', 'd'); 
     animate.setAttribute('dur', 's'); 
     animate.setAttribute('fill', 'freeze'); 
     animate.setAttribute('values', 'M 10 10 L 40 20 20 40; M 30 10 L 10 40 40 30'); 
     path.appendChild(animate); 
    } 
</script> 

http://jsfiddle.net/c5mzn6d0/

如果按頁面加載後右側的「更改」按鈕，動畫會出現。但是，如果您在頁面加載後等待4秒（在屬性dur中指定的時間）並按下按鈕，則不會顯示動畫。如果等待2秒鐘並按下按鈕，則動畫從中間開始。

我該如何通過JavaScript更正動畫SVG路徑的「d」屬性？

Answer 1

見http://jsfiddle.net/c5mzn6d0/4/

添加

animate.beginElement(); 

你追加動畫後：

var btn = document.getElementById('btn'); 
btn.onclick = function() { 
    var path = document.getElementById('path1'); 
    var animate = document.createElementNS("http://www.w3.org/2000/svg","animate"); 
    animate.setAttribute('attributeName', 'd'); 
    animate.setAttribute('dur', '1s'); 
    animate.setAttribute('fill', 'freeze'); 
    animate.setAttribute('values', 'M 10 10 L 40 20 20 40; M 30 10 L 10 40 40 30'); 
    path.appendChild(animate); 
    animate.beginElement(); 
}