如何通过javascript添加动画SVG？

<svg width="5cm" height="3cm" viewBox="0 0 500 300"> 
<path id="path1" d="M100,250 C 100,50 400,50 400,250" 
    fill="none" stroke="blue" stroke-width="7.06" /> 
<circle r="17.64" fill="red"> 
<animateMotion dur="6s" repeatCount="1" rotate="auto" > 
    <mpath xlink:href="#path1"/> 
</animateMotion> 
</circle> 
</svg>

如果我写纯HTML/SVG文件的SVG，它工作正常，圆正确动画。但是，如果我通过JavaScript动态添加圆圈元素，则会添加圆圈，但不会生成动画。怎么了？ JS代码：如何通过javascript添加动画SVG？

var svg = $("svg"); //use jquery 
var circle = document.createElementNS("http://www.w3.org/2000/svg","circle"); 
circle.setAttribute("r", "5"); 
circle.setAttribute("fill", "red"); 
var ani = document.createElementNS("http://www.w3.org/2000/svg","animateMotion"); 
ani.setAttribute("dur", "26s"); 
ani.setAttribute("repeatCount", "indefinite"); 
ani.setAttribute("rotate", "auto"); 
var mpath = document.createElementNS("http://www.w3.org/2000/svg","mpath"); 
mpath.setAttribute("xlink:href", "#path1"); 
ani.appendChild(mpath); 
circle.appendChild(ani); 
svg.append(circle);

来源

2012-03-12 dencey

您可以发布完整的HTML文件，而不是该段还讨论？我不知道你用什么JS框架来选择SVG。如果您将SVG标记嵌入或嵌入嵌入标记，这将很高兴。 – nak 2012-03-12 02:54:40

上 “的mpath” 使用setAttributeNS而不是setAttribute。

mpath.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#path1");

这里有一个演示：http://jsfiddle.net/zh553/

来源

2012-03-12 03:34:12

非常感谢，它的作品！正如你所说，我用“的setAttribute”的方法对错误“的mpath” – dencey 2012-03-12 05:22:50

@dencey没有问题，这是一个有趣的问题:) – 2012-03-12 05:23:54

使用上 “的mpath” setAttributeNS而不是setAttribute同意。

但至少对于Chrome（以及其他基于WebKit的浏览器？），似乎有必要注意http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS，它说第二个参数是qualifiedName，即要创建或更改的属性的限定名称。

mpath.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#path1");

或者，如果需要的话，更一般：

mpath.setAttributeNS("http://www.w3.org/1999/xlink", 
        mpath.lookupPrefix("http://www.w3.org/1999/xlink") + ":href", 
        "#path1");

在https://bugs.webkit.org/show_bug.cgi?id=22958

来源

2013-04-04 09:30:58 codelion

如何通过javascript添加动画SVG？

回答

相关问题