setTimeout не работает, когда используется для svg

Question

Я хочу переместить круг в строке, скажем, через 3 секунды. Я использую JS для динамического рисования круга и перемещения его и setTimeout для временной задержки. когда я загружаю страницу, кружок появляется через 3 секунды, но тем временем проехал некоторое расстояние по линии (он должен был начинаться с начала строки i.e (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> 

Примечание: это часть Джанго проекта. Я использую mozilla.

Редактировать
Этот animateTransform также вызывает проблемы даже при вызове beginElement на нем.

Answer 1

анимация таймер для SMIL анимации начинается ticki нг при создании документа SVG. Поэтому, если вы скажете 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>

Answer 2

Вам необходимо сначала вызвать функцию, а затем снова вызвать ее в setTimeout. Что-то, как это будет работать:

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