javascript - 如何对 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

元素创建似乎区分大小写

工作 fiddle here

看这一行

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

将 animatemotion 替换为 animateMotion

代码

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 bug，在检查了一些我尝试过区分大小写的示例后，我意识到它有效