Javascript 如何设置JS生成的SVG对象的动画？

这个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);

---

元素创建似乎区分大小写

工作小提琴

看这条线

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

将animatemotion替换为animatemotion

代码

最初，我认为这是一个bug，在检查了一些我尝试使用区分大小写的示例后，我意识到它是有效的

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);