svgに使用するとsetTimeoutが機能しない

Question

3秒後に1行で円を移動したい。私は動的に円を描画し、それを移動するためにJSを使用しており、時間の遅延のためにsetTimeoutを使用しています。私がページをロードすると、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); 

demo.html

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

注：それはDjangoプロジェクトの一部であり、ここで は、関連するコードです。私はmozillaを使用しています。


このanimateTransformはbeginElementを呼び出しても問題を引き起こします。

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アニメーションのためのアニメーションタイマーがticki NGを開始します。だからbegin="0s"と言うと、ドキュメントが初めて作成されたときにアニメーションが開始されるはずです。あなたの場合、それは<svg>がDOMに追加されたときです。 3秒後に<circle>と<animate>要素を追加した場合はありません。アニメーションは、すでに3秒間実行されているかのように開始されます。

コードの最も単純な修正点は、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>

Answer 2

最初に関数を呼び出してから、もう一度setTimeoutで呼び出す必要があります。このような何かが働くだろう：

RunTrain(<initial args>) 
setInterval(() => RunTrain(<args for future>), 3000)