javascript - setTimeout 用于 svg 时不起作用

Question

我想在一条线上移动一个圆圈，比如 3 秒后。我正在使用JS动态绘制一个圆并移动它并设置Timeout来延迟时间。当我加载页面时，圆圈会在 3 秒后出现，但与此同时已经在线上移动了一段距离(它应该从线的开头开始，即 (30,y1))。我不知道我哪里错了。相关代码如下:

train.js

    function RunTrain(x,y,desti,time,r)
     {
        var xmlns="http://www.w3.org/2000/svg";
        var C=document.createElementNS(xmlns,"circle");
        C.setAttributeNS(null,"cx",x);
        C.setAttributeNS(null,"cy",y);
        C.setAttributeNS(null,"r",r);
        C.setAttribute("style","stroke-width:1;stroke:blue;fill:skyblue");

        var animate=document.createElementNS(xmlns,"animate");
        animate.setAttribute("attributeName","cx");
        animate.setAttribute("attributeType","XML");
        animate.setAttribute("from",x);
        animate.setAttribute("to",desti);
        animate.setAttribute("dur","2s");
        animate.setAttribute("begin","0s");
        animate.setAttribute("repeatCount","1");
        animate.setAttribute("fill","freeze");

        C.appendChild(animate);
        document.getElementById("id1").appendChild(C);
        //id1 is the id of svg tag
     }

call.js

setTimeout(function(){ RunTrain(30,y1,Mlx2,5,10); },3000);

演示.html

<svg height = 5000 width = 5000 id="id1">  </svg>   
<script src="/static/train.js"></script>
<script src="/static/call.js"></script>

注意:它是 django 项目的一部分。我正在使用 Mozilla。

编辑
即使在其上调用 beginElement，此 animateTransform 也会造成问题。

 var animateTransform=document.createElementNS(xmlns,"animateTransform");
    animateTransform.setAttribute("attributeName","transform");
    animateTransform.setAttribute("attributeType","scale");
    animateTransform.setAttribute("dur","2s");
    animateTransform.setAttribute("begin","3s");
    animateTransform.setAttribute("from","0 0");
    animateTransform.setAttribute("to","160 "+ y1);
    animateTransform.setAttribute("fill","freeze");

Answer 1

创建 SVG 文档时，SMIL 动画的动画计时器开始计时。所以如果你说begin="0s"这意味着动画应该在第一次创建文档时开始。在你的情况下，那就是 <svg>被添加到 DOM 中。当您添加 <circle> 时就不会了和<animate>三秒后的元素。因此动画开始时就好像您已经运行了三秒钟。

最简单的代码修复方法是设置 begin="indefinite"并在添加元素后开始运行动画。您可以通过调用beginElement()来做到这一点。请参阅下面的演示。

function RunTrain(x,y,desti,time,r)
{
    var xmlns="http://www.w3.org/2000/svg";
    var C=document.createElementNS(xmlns,"circle");
    C.setAttributeNS(null,"cx",x);
    C.setAttributeNS(null,"cy",y);
    C.setAttributeNS(null,"r",r);
    C.setAttribute("style","stroke-width:1;stroke:blue;fill:skyblue");

    var animate=document.createElementNS(xmlns,"animate");
    animate.setAttribute("attributeName","cx");
    animate.setAttribute("attributeType","XML");
    animate.setAttribute("from",x);
    animate.setAttribute("to",desti);
    animate.setAttribute("dur",time);
    animate.setAttribute("begin","indefinite");
    animate.setAttribute("repeatCount","1");
    animate.setAttribute("fill","freeze");

    C.appendChild(animate);
    document.getElementById("id1").appendChild(C);
    //id1 is the id of svg tag
  
    animate.beginElement();
}

var y1 = 30;
var Mlx2 = 400;

setTimeout(function(){ RunTrain(30,y1,Mlx2,5,10); },3000);

<svg height="5000" width="5000" id="id1"></svg>