Wie ändert man die SVG-Objektfarbe dynamisch mit einer JavaScript-Schleife?

Question

Ich baute ein Netzwerk mit etwa 1000 Knoten im SVG-Format. Jetzt möchte ich die Farbe aller Knoten dynamisch ändern (mit der Zeit). Für den Anfang möchte ich nur sicherstellen, dass die Kreise/Knoten in meiner SVG-Figur Farben auf der Grundlage eines Zufallszahlengenerators mit der Zeit ändern. Kann ich eine einfache for-Schleife in JavaScript verwenden, um N Farbwechselereignisse zu erzeugen?

Dies ist die Funktion, die ich schrieb der Hoffnung, dass es die Farbe eines bestimmten Knoten/Kreis hundertmal durch einzigen Mausklick

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

Leider alle es tut ausgelöst ändern würde, ist die Farbe nur einmal pro jeder sich ändern Mausklick, als wäre die for-Schleife völlig nutzlos!

Answer 1

uns Lassen consdider als ein Knoten folgende rect. Verwenden Sie die window.setInterval-Funktion für den Timer und verwenden Sie Math.Random function, um eine Zufallszahl zu generieren und entsprechend Ihren Anforderungen zu verwenden.

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

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