如何動畫JS生成的SVG對象？

Question

這段Javascript代碼創建了一個圓形對象，但不會爲該圓圈設置動畫。在Chrome中，我可以使用開發人員工具編輯HTML（添加一些空白;沒有任何材料），這似乎說服Chrome進行動畫製作。

如何強制動畫開始？

function f(x, y) { 
    var svg = document.getElementById('svg'); 

    var circle = document.createElementNS(svg.namespaceURI, 'circle'); 
    circle.setAttribute('cx', x); 
    circle.setAttribute('cy', y); 
    circle.setAttribute('r', '50'); 

    var animation = document.createElementNS(svg.namespaceURI, 'animatemotion'); 
    var path = 'm 0,0 l ' + (x + 500) + ',0' 
    animation.setAttribute('path', path); 
    animation.setAttribute('dur', '30s'); 
    animation.setAttribute('fill', 'freeze'); 
    circle.appendChild(animation); 

    svg.appendChild(circle); 
} 

f(50, 50); 

Answer 1

元素創作似乎情況

在該行

var animation = document.createElementNS(svg.namespaceURI, 'animateMotion'); 

工作撥弄here

外觀與animateMotion

更換animatemotion敏感3210

代碼

function f(x, y) { 
    var svg = document.getElementById('svg'); 

    var circle = document.createElementNS(svg.namespaceURI, 'circle'); 
    circle.setAttribute('cx', x); 
    circle.setAttribute('cy', y); 
    circle.setAttribute('r', '50'); 

    var animation = document.createElementNS(svg.namespaceURI, 'animateMotion'); 
    var path = 'm 0,0 l ' + (x + 500) + ',0' 
    animation.setAttribute('path', path); 
    animation.setAttribute('dur', '30s'); 
    animation.setAttribute('fill', 'freeze'); 
    circle.appendChild(animation); 

    svg.appendChild(circle); 
} 

f(50, 50); 

起初我還以爲是this錯誤，檢查我與區分大小寫嘗試了幾個例子後，我意識到，它的工作