jquery - SVG 动画和 JavaScript

Question

我使用路径和 animateMotion。在我尝试使用 JavaScipt 动态生成它之前，它运行良好。我使用jQuery SVG

我尝试使用本机方法附加动画代码：

    $("#scheme_wrapper").svg();
    var svg=box.svg('get');
    svg.add('<rect x="10" y="10" width="20" height="20" fill="red"><animateMotion id="KKK" path="M300,200 a100,100 0 1,0 -100,100 a100,100 0 0,0 100,-100" dur="20s" rotate="auto" repeatCount="indefinite" /></rect>');

我看到小的红色矩形，但动画没有开始。但是如果我用这个动画代码创建 svg 文件 - 矩形成功移动。为什么？如何使用 JavaScript 动态创建动画动画？

Answer 1

我找到了解决方案：

var svg=box.svg('get');
svg.rect(0,0,80,50,{fill:"red",id:"rectObj"});
var motion=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");
motion.setAttribute("dur", "20s");
motion.setAttribute("repeatCount", "indefinite");
motion.setAttribute("path", "M300,200 a100,100 0 1,0 -100,100 a100,100 0 0,0 100,-100");
document.getElementById("rectObj").appendChild(motion);

Answer 2

您使用的是 Safari 还是 Chrome 对吧？恐怕动态添加的动画在那里不起作用。请尝试使用 Firefox 或 Opera。