Question

15

Change strokeDashoffset of a SVG line in a for loop

rated 0 times [ 21] [ 6] / answers: 1 / hits: 15795 / 9 Years ago, tue, march 10, 2015, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jameson

Add To Favorites

Follow

Total Points: 534

Total Questions: 103

Total Answers: 102

Location: Lithuania

Member since Fri, Sep 4, 2020

4 Years ago

jameson questions

1 React native navigation v6 authentication flow

Tue, Jan 4, 22, 00:00, 2 Years ago

1 how to make slide transition smoother and not instant on swiper update - Swiper API

Thu, Oct 21, 21, 00:00, 3 Years ago

1 NextJS calling API in a form submit

Tue, Mar 2, 21, 00:00, 3 Years ago

1 React setState inside componentDidUpdare leads to Maximum update depth exceeded

Thu, Dec 10, 20, 00:00, 4 Years ago

1 How to export all components in index.js?

Sat, Jul 4, 20, 00:00, 4 Years ago

View All

answered 9 Years ago arron · Accepted Answer

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>