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

【问题标题】：How to dynamically change the SVG object color using a JavaScript loop?如何使用 JavaScript 循环动态更改 SVG 对象颜色？
【发布时间】：2016-05-19 13:28:05
【问题描述】：

我构建了一个包含大约 1000 个 SVG 格式节点的网络。现在我想动态地（随着时间）改变所有节点的颜色。对于初学者，我只想确保我的 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 循环完全没用一样！

【问题讨论】：

写一些代码和问题一起发布。
我刚刚添加了。请看一下。谢谢
这已暂停，但您需要在该函数上设置超时或间隔。 for 循环改变颜色 100 次，但你只能看到一个。所以你必须给它一个间隔。
非常感谢。我会调查的。

标签： javascript svg

【解决方案1】：

让我们考虑以下 rect 作为一个节点。使用 window.setInterval 函数进行定时器，并使用 Math.Random 函数生成随机数并根据您的要求使用。

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

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

【讨论】：