title: Change strokeDashoffset of a SVG line in a for loop
body: <p>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?  </p>
  
  <p>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. </p>
  
  <p>I know this is possible btw :) As said, I already have it working in css.</p>
  
  <pre><code>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 &lt; 100; i++)
  {
  animateRoute(element);
  }
  </code></pre>
  
  <p>Thanks in advance!</p>