javascript - Change strokeDashoffset of a SVG line in a for loop - Stack Overflow

admin管理员组

文章数量:1236598

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 pletely 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!

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 pletely 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!

• javascript
• html
• animation
• svg

Share Improve this question Follow asked Mar 10, 2015 at 18:59 Kalle KromannKalle Kromann 12311 gold badge11 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

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 e 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>

本文标签： javascriptChange strokeDashoffset of a SVG line in a for loopStack Overflow