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

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?

我用SVG格式构建了一个大约1000个节点的网络。现在我想动态地改变所有节点的颜色(随着时间的推移)。对于初学者,我只想确保SVG图中的圆/节点根据随机数生成器随时间改变颜色。我可以在JavaScript中使用简单的for循环来实现N个节点颜色更改事件吗?

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!

不幸的是,它只是每次鼠标点击只更改一次颜色,就好像for循环完全没用!

1 个解决方案

#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.

让我们将rect作为一个节点。对定时器使用window.setInterval函数,并使用Math.Random函数生成随机数并根据您的要求使用。

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

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