Change strokeDashoffset of a SVG line in a for loop

Question

I'm trying to animate a line expanding. I already have it in css, but I need to do it in javaScript, because that is the only way I can get the lenght of the path, which I need. I think I'm very close but it's not working! Any ideas?

Following is my code. As you can see I get the length of the path, and give it a strokeDashArray of that length. That means the line will be dashed, but the dash is filling the entire line. The trick is to decrease the strokeDashoffset value, because that determines where the dash starts. So if that also starts at pathLength, the line will be completely invisible, and decreasing the value will reveal the path.

I know this is possible btw :) As said, I already have it working in css.

var element = document.getElementById("animpath");
var pathLength = element.getTotalLength();

element.style.strokeDasharray = pathLength;
element.style.strokeDashoffset = pathLength;

function animateRoute (e) 
{
e.style.strokeDashoffset = e.style.strokeDashoffset - 100;
}

for (i = 0; i < 100; i++)
{
animateRoute(element);
}

Thanks in advance!

Answer 1

The code:

function animateRoute (e) 
{
   e.style.strokeDashoffset = e.style.strokeDashoffset - 100;
}

for (i = 0; i < 100; i++)
{
   animateRoute(element);
}

Is basically equivalent to

e.style.strokeDashoffset = e.style.strokeDashoffset - 10000;

Because the loop whips through all its iterations without giving the browser a chance to update the page.

To get around that, do one step in the loop and then call setTimeout() to tell the browser to come back to us in a little bit so we can do the next iteration.

var element = document.getElementById("animpath");
var pathLength = element.getTotalLength();

element.style.strokeDasharray = pathLength;
element.style.strokeDashoffset = pathLength;

function animateRoute(e, len) 
{
  // Each step we decrement the dash offset
  len -= 10;
  if (len < 0)
    len = 0;  // clamp to minimum 0

  element.style.strokeDashoffset = len;

  // We need to stop looping when the length gets to 0
  if (len > 0) {
    // Do another step
    setTimeout(function() { animateRoute(e, len); }, 10);
  }
}

animateRoute(element, pathLength);

<svg viewBox="-10 -10 420 120">
  
    <path id="animpath" d="M 0 0 L 400 10 0 20 400 30 0 40 400 50 0 60 400 70 0 80 400 90 0 100"
          stroke="black" stroke-width="3" fill="none"/>
  
</svg>