javascript in svg error

Question

Я пытаюсь создать новый элемент в svg через javascript, но браузер будет разбит из-за цикла; вот код:

<svg width="100%" height="100%" viewBox="0 0 1500 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <script>  
     var $x=0; 
     var $y=0; 
     var $z=2; 
     for(var $i=0; $i=10; $i++){ 
     var svg = document.getElementsByTagName('svg')[0]; 
     var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'rect'); 
     newElement.setAttribute("x",$x +"%"); 
     newElement.setAttribute("y",$y +"%"); 
     newElement.setAttribute("height","4%"); 
     newElement.setAttribute("width","4%"); 
     newElement.style.fill="#FFA7A7"; 
     svg.appendChild(newElement); 
     $x=$x+4; 

     };    
     </script> 
    </svg> 

Answer 1

Это очищенное вверх код:

<svg width="100%" height="100%" viewBox="0 0 1500 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <script> 
 
    var x = 0, y = 0; 
 
    for (var i = 0; i < 10; i++) { 
 
     var svg = document.getElementsByTagName('svg')[0]; 
 
     var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'rect'); 
 
     newElement.setAttribute("x", x + "%"); 
 
     newElement.setAttribute("y", y + "%"); 
 
     newElement.setAttribute("height", "4%"); 
 
     newElement.setAttribute("width", "4%"); 
 
     newElement.style.fill = "#FFA7A7"; 
 
     svg.appendChild(newElement); 
 
     x = x + 4; 
 

 
    }; 
 
    </script> 
 
</svg>

код был бесконечный цикл, который сделал крах браузера, то есть для у условие $ i = 10.