Echtzeit-Iteration über SVG-Objekte

Zum Beispiel ich dieseEchtzeit-Iteration über SVG-Objekte

<svg id="svg-img1" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <line x1="0" y1="0" x2="0" y2="0" style="stroke:black; stroke-width:1px;"></line> 
    <line x1="0" y1="0" x2="0" y2="0" style="stroke:black; stroke-width:1px;"></line> 
    <line x1="0" y1="0" x2="0" y2="0" style="stroke:black; stroke-width:1px;"></line> 
    <line x1="0" y1="0" x2="0" y2="0" style="stroke:black; stroke-width:1px;"> </line> 
</svg>

und diese in meinem js

$('svg').find('line').each(function(){ 
    $(this).attr('style','stroke:red'); 
    sleep(10); 
});

und "Sleep" -Funktion

function sleep(ms) { 
    ms += new Date().getTime(); 
    while (new Date() < ms){} 
}

in html habe Bei der Ausführung die Farbe meiner Linien ändert sich für jeden sofort. Und ich muss die Farbe der Linien der Reihe nach ändern, und damit es als eine Farbe gesehen werden kann, ändert sich die Farbe nach der anderen. Etwas ähnliches wie Animation

Versuchte ohne jquery - das gleiche Ergebnis

Quelle

2017-03-24 Vitaxxxa

Warum diese Sleep-Funktion verwenden und nicht das eingebaute und ziemlich gut funktionierende ['setTimeout'] (https://developer.mozilla.org/en-US/doc s/Web/API/WindowOrWorkerGlobalScope/setTimeout) oder ['setInterval'] (https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)? – giorgio

Setzen Sie Ihre Schlaffunktion in eine 'setTimeout'-Funktion. Es wird den Trick machen. –

Statt Schlaf, können Sie window.setTimeout verwenden, um eine Funktion nach einer gewissen Verzögerung auszuführen. So konnten Sie so etwas tun:

$('svg').find('line').each(function(index, element){ 
    window.setTimeout(function() { 
     $(element).attr('style','stroke:red'); 
    }, index * 100); 
});

Quelle

2017-03-24 14:07:50 Brian

Verwenden Sie das SVG belebtes Element:

<animate id="a14" attributeName="stroke" from="black" to="red" 
dur="3s" begin="9s;al4.end+3s" stroke="freeze" />

HINWEIS: Sie nicht den Code auszuschneiden und oben einfügen, es wurde gebrochen in der Mitte, so dass es ohne Scrollen gesehen werden kann.

attributeName: ab
to Wert: Endwert
dur: Dauer der
begin
from zu animieren, wenn beginnen; diese bestimmte Menge von Werten sagt: Start in 9 Sekunden; (Referenzierten dieses belebte Element durch id) in 3 Sekunden zu beenden
stroke: Das Attribut, das animiert ist wird, wird dieses Attribut zu stoppen, nachdem sie animiert hat,

SNIPPET

<svg id="svg-img1" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 

 
    <line x1="0" y1="10" x2="400" y2="10" style="stroke:black; stroke-width:1px;"> 
 
    <animate id="a11" attributeName="stroke" from="black" to="red" dur="3s" begin="0s;al1.end+3s" stroke="freeze" /> 
 
    </line> 
 
    
 
    <line x1="0" y1="20" x2="400" y2="20" style="stroke:black; stroke-width:1px;"> 
 
    <animate id="a12" attributeName="stroke" from="=black" to="red" dur="3s" begin="3s;al2.end+3s" stroke="freeze" /> 
 
    </line> 
 
    
 
    <line x1="0" y1="30" x2="400" y2="30" style="stroke:black; stroke-width:1px;"> 
 
    <animate id="a13" attributeName="stroke" from="black" to="red" dur="3s" begin="6s;al3.end+3s" stroke="freeze" /> 
 
    </line> 
 
    
 
    <line x1="0" y1="40" x2="400" y2="40" style="stroke:black; stroke-width:1px;"> 
 
     <animate id="a14" attributeName="stroke" from="black" to="red" dur="3s" begin="9s;al4.end+3s" stroke="freeze" /> 
 
    </line> 
 
     
 
</svg>

Quelle

2017-03-24 14:51:22 zer00ne

Echtzeit-Iteration über SVG-Objekte

Antwort

Verwandte Themen