Question

它不起作用！谁能告诉我为什么？圆圈没有孩子animateMotion！

 var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");
                circle.setAttributeNS(null,"cx",0);
                circle.setAttributeNS(null,"cy",0);
                circle.setAttributeNS(null,"r",7);
                circle.setAttributeNS(null,"fill",'red');
            var animateMotion=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");
                animateMotion.setAttributeNS(null,"dur",'6s');
                animateMotion.setAttributeNS(null,"repeatCount",'indefinite');
                animateMotion.setAttributeNS(null,'path',path);
                circle.appendChild(animateMotion);
                dom.appendChild(circle);
                console.log(circle.appendChild,dom)

Answer 1

据您所知，您正在尝试重新创建以下网址中显示的动画：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion

首先要突出的是你尝试追加路径的方式。这与上述链接中显示的SVG不对应。实际上， animateMotion 元素没有路径属性。然而，具有 mpath 类型的子元素。

如果我调整生成代码以使动画所需的所有元素 - 即圆圈，enimateMotion和mpath元素的路径，那么我生成看似好的标记，尽管有一些（全部）自我关闭标签错误地表示为普通标签，虽然没有内容，只是属性。

然而，这个有点破碎的SVG仍然无法运行！如果我然后清理并改变正常的＆＃39;标签为自动关闭，它工作正常..显然，我也做错了。

首先，修改了javascript / html

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
    var dom = byId('svg');

    var path = document.createElementNS("http://www.w3.org/2000/svg","path");
    path.setAttributeNS(null,"d","M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110");
    path.setAttributeNS(null,"stroke","lightgrey");
    path.setAttributeNS(null,"stroke-width","2");
    path.setAttributeNS(null,"fill","none");
    path.setAttributeNS(null,"id","theMotionPath");
    dom.appendChild(path);


//    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
//      stroke="lightgrey" stroke-width="2" 
//      fill="none" id="theMotionPath"/>

    var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");
        circle.setAttributeNS(null,"cx",0);
        circle.setAttributeNS(null,"cy",0);
        circle.setAttributeNS(null,"r",5);
        circle.setAttributeNS(null,"fill",'red');
    var animateMotion=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");
        animateMotion.setAttributeNS(null,"dur",'6s');
        animateMotion.setAttributeNS(null,"repeatCount",'indefinite');
    //  animateMotion.setAttributeNS(null,'path',path);
        circle.appendChild(animateMotion);


    var mPathObj = document.createElementNS("http://www.w3.org/2000/svg","mpath");
        mPathObj.setAttribute("xlink:href",'#theMotionPath');
        animateMotion.appendChild(mPathObj);

//      <mpath xlink:href="#theMotionPath"/>    

        dom.appendChild(circle);
        console.log(circle.appendChild,dom);
}

HTML

<body>
    <svg id='svg' xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    </svg>
</body>

现在，对于生成的（损坏的）SVG

<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath"></path><circle cx="0" cy="0" r="5" fill="red"><animateMotion dur="6s" repeatCount="indefinite"><mpath xlink:href="#theMotionPath"></mpath></animateMotion></circle></svg>

最后，工作人员：

＆＃13;

<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
	<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath"/>
	<circle cx="0" cy="0" r="5" fill="red">
		<animateMotion dur="6s" repeatCount="indefinite">
			<mpath xlink:href="#theMotionPath"/>
		</animateMotion>
	</circle>
</svg>

＆＃13;

svg animateMotion不能添加这个dom，这个dom只有一个圆圈！圆圈没有孩子

1 个答案: