Question

我使用path和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文件 - rectagle成功移动。为什么？如何使用JavaScript动态创建animateMotion？

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吗？我担心dynamically added animation在那里不起作用。请尝试使用Firefox或Opera。

SVG animateMotion＆amp; JavaScript的

2 个答案: