Как динамически изменять цвет объекта SVG с помощью цикла JavaScript?

Question

Я построил сеть с примерно 1000 узлами в формате SVG. Теперь я хочу динамически менять цвет всех узлов (со временем). Для начала я просто хочу убедиться, что круги/узлы моей фигуры SVG меняются со временем на основе генератора случайных чисел. Могу ли я использовать простой цикл for в JavaScript, чтобы вызвать 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

Давайте рассмотрим следующий прямоугольник как один узел. Используйте функцию window.setInterval для таймера и используйте Math.Random fucntion для генерации случайного числа и использования в соответствии с вашим требованием.

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

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