SVG Circle cx, cy отличается при динамическом добавлении

Question

Привет Я новичок в концепциях HTML5 svg, поэтому подумал об обучении, создав игру. просто создал n количество кругов внутри svg и ограничил его движения, теперь я пытаюсь снимать круг из определенной позиции (cx, cy), но похоже, что позиция полностью не синхронизирована с существующими координатами внутри ... Помогите SVG мне понять, почему эта проблема возникает

Browser используется: Chrome (в случае, если вопрос bcoz браузера)

Pasted ниже некоторой части всего кода ...

#svgBoard 
     {   
      border:1px solid black; 
      width:600px; 
      height:500px;   
     } 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="svgBoard" preserveAspectRatio="none" viewbox="0,0,600,550"/>  
     <rect id = "tank" x="10" y="465" width="20" height="35" style="fill:red;stroke-width:2;stroke:black;"> 
</svg> 


<script type="text/javascript"> 
    var intCircles  = 1; 
    var intRadius  = 20; 
    var arrColors  = new Array("green","maroon","yellow","pink","lime","orange","red","darkblue"); 
    var intBoardXLeft = 12; 
    var intBoardYTop = 13;  
    var intBoardXRight = 288; 
    var intBoardYBottom  = 210; 
    var intBombFired = 0; 
    var xmlns = "http://www.w3.org/2000/svg"; 
    function fnMoveCircles(circleID) 
    { 
     var objCircle = document.getElementById(circleID); 

     if(objCircle == undefined) {return;} 

     var x = parseInt(objCircle.getAttribute("cx"),10); 
     var y = parseInt(objCircle.getAttribute("cy"),10);      
     if (x < intBoardXLeft) 
     { 
      var resetIncX = Math.floor((Math.random()*4)+1); 
      resetIncX = Math.abs(resetIncX); 
      objCircle.setAttribute("incX", resetIncX); 
     } 
     else if (x > intBoardXRight) 
     { 
      var resetIncX = Math.floor((Math.random()*4)+1); 
      resetIncX = resetIncX * -1; 
      objCircle.setAttribute("incX", resetIncX); 
     } 

     if (y < intBoardYTop) 
     { 
      var resetIncY = Math.floor((Math.random()*4)+1); 
      resetIncY = Math.abs(resetIncY); 
      objCircle.setAttribute("incY", resetIncY); 
     } 
     else if (y > intBoardYBottom) 
     {   
      var resetIncY = Math.floor((Math.random()*4)+1); 
      resetIncY = resetIncY * -1; 
      objCircle.setAttribute("incY", resetIncY); 
     } 

     x = x + parseInt(objCircle.getAttribute("incX"),10); 
     y = y + parseInt(objCircle.getAttribute("incY"),10);    
     objCircle.setAttribute("cx", x); 
     objCircle.setAttribute("cy", y); 

     var transformAttr = ' translate(' + x + ',' + y + ')'; 
      objCircle.setAttribute('transform', transformAttr); 
     setTimeout("fnMoveCircles('" + circleID + "')",20);   
    } 

    function getRandomX() 
    { 
     return Math.floor((Math.random()*intBoardXRight-intBoardXLeft)+1)+intBoardXLeft; 
    } 

    function getRandomY() 
    { 
     return Math.floor((Math.random()*intBoardYBottom-intBoardYTop)+1)+intBoardYTop; 
    } 

    function fireBomb() 
    { 
     var objBomb = document.getElementById("circleBomb");    
     var x = parseInt(objBomb.getAttribute("cx"),10); 
     var y = parseInt(objBomb.getAttribute("cy"),10); 
     y = y-1; 

     if (y < intBoardYTop) 
     {   
      document.getElementById("svgBoard").removeChild(objBomb); 
      intBombFired = 0; 
     } 
     else 
     { 
      objBomb.setAttribute("cy", y); 
      setTimeout("fireBomb()",1); 
     } 

     for(intChk=0;intChk <= intCircles-1; intChk++) 
     { 
      var objCheck = document.getElementById("svgcircle"+intChk); 

      if (objCheck != undefined) 
      { 
       var xchk = parseInt(objCheck.getAttribute("cx"),10); 
       var ychk = parseInt(objCheck.getAttribute("cy"),10); 

       if ((x >= xchk && x <= xchk+intRadius*2) && (y >= ychk && y <= ychk+intRadius*2)) 
       {objCheck.setAttribute("fill","black");      
        document.getElementById("svgBoard").removeChild(objCheck); 
        document.getElementById("svgBoard").removeChild(objBomb); 
        intBombFired = 0; 
        return; 
       } 
      } 
     } 
    } 

    (function ($) { 

      $(document).ready 
      (     
       function() {   

      //Create the circles 
      for(intCreate=0;intCreate <= intCircles-1; intCreate++) 
      { 
       var objCircle = document.createElementNS(xmlns, "circle");  
       objCircle.setAttribute("id", "svgcircle" + intCreate); 
       objCircle.setAttribute("cx", getRandomX()); 
       objCircle.setAttribute("cy", getRandomY()); 
       objCircle.setAttribute("r", intRadius); 
       var rand = Math.floor((Math.random()*arrColors.length-1)+1); 
       objCircle.setAttribute("fill", arrColors[rand].toString()); 
       objCircle.setAttribute("stroke-width","1px"); 
       objCircle.setAttribute("incX", Math.floor((Math.random()*4)+1)); 
       objCircle.setAttribute("incY", Math.floor((Math.random()*4)+1));      
       $("#svgBoard").append(objCircle); 
       setTimeout("fnMoveCircles('svgcircle" + intCreate + "')",20);     
      } 

      $("body").keydown 
      (
       function (event) { 

        if (event.keyCode == 37){ //left arrow key 

         var objRect = document.getElementById("tank"); 
         var x = parseInt(objRect.getAttribute("x"),10); 
         if ((x-3) > 3) 
         { 
          objRect.x.baseVal.value = x-3;        
         } 
        } 
        else if (event.keyCode == 39){//right arrow key 

         var objRect = document.getElementById("tank"); 
         var x = parseInt(objRect.getAttribute("x"),10); 
         if ((x+3) + parseInt(objRect.getAttribute("width"),10) < 600) 
         {         
          objRect.x.baseVal.value = x+3;       
         } 
        } 
        else if (event.keyCode == 38 && intBombFired == 0) {//Up arrow key "THIS IS WHERE IM FACING THE PROBLEM" 

         var objNewBomb = document.createElementNS(xmlns, "circle"); 
         var svg = document.querySelector("svgBoard"); 
         //var objRect = document.getElementById("tank");        

         objNewBomb.setAttribute("id", "circleBomb");        
         objNewBomb.setAttribute("r", intRadius);       
         objNewBomb.setAttribute("fill", "black");        
         objNewBomb.setAttribute("stroke", "red"); 
         objNewBomb.setAttribute("stroke-width","2px"); 
         $("#svgBoard").append(objNewBomb);       

         objNewBomb.setAttribute("cx", getRandomX()); 
         objNewBomb.setAttribute("cy", 210); 

         intBombFired = 1; 
         fireBomb(); 
         alert (objNewBomb.getAttribute("cy")); 
        }      
       } 
      ); 
     }   
     ) 
    }) (jQuery); 
</script> 

Answer 1

Почему вы устанавливаете расположение окружности (cx, cy = x, y), а также переводите круг теми же значениями x, y? Вам нужно только делать то или другое.