Q:

Real-time Iteration over SVG objects

For example i have this in html
<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>

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

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

When executing, the color of my lines changes at once for everyone. And I need the color of the lines to change in turn, and so that it can be seen as one color after another changes color. Something similar to animation
Tried without jquery - the same result

A:

Instead of sleep, you can use window.setTimeout to execute a function after a certain delay. So, you could do something like this: 
$('svg').find('line').each(function(index, element){
    window.setTimeout(function() {
        $(element).attr('style','stroke:red');
    }, index * 100);
});

