如何动画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错误，检查我与区分大小写尝试了几个例子后，我意识到，它的工作