如何使用JavaScript循环动态更改SVG对象的颜色？

Question

I constructed a network with about 1000 nodes in SVG format. Now I want to change the color of all the nodes dynamically (with time). For starters I just want to make sure that the circles/nodes in my SVG figure change colors with time based on a random number generator. Can I use a simple for loop in JavaScript to bring about N number of node color changing events?

This is the function I wrote hoping that it would change the color of a particular node/circle hundred times triggered by single mouse click

function ChangeRandomNodeColor(){
  var mycircle = document.getElementById("node_1150")   
  for (i = 0; i < 100 ; i++) {
    var r = Math.random()
    if (r < 0.33) {
      mycircle.style.fill = "yellow" ;
    } 
    else if (r < 0.66) {
      mycircle.style.fill = "cyan" ;
    } 
    else {
      mycircle.style.fill = "black" ;
    }
  }
}

Unfortunately all it does is to change the color only once per every mouse click, it's as though the for loop is completely useless!

Answer 1

Let us consdider following rect as one node . Use window.setInterval function for timer and use Math.Random fucntion to generate a random number and use according your requirement.

  <svg>
      <rect width="100px" height="100px" fill="yellow" id="one">
      </rect>
  <svg>

document.getElementById("one").style.fill = "red";