Question

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

这是我写的函数，希望它能通过单击鼠标来改变特定节点/圆的颜色百次

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" ;
    }
  }
}

不幸的是，每次鼠标点击只改变颜色一次，就像for循环完全无用一样！

Answer 1

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

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

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

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

1 个答案: