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

元素创建似乎区分大小写

工作小提琴 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错误，在查看了一些我尝试使用casesensitive的示例后，我意识到它有效

如何为JS生成的SVG对象制作动画？

1 个答案: