How is it postponed to draw a path without libraries?

Question

I want to get a stage animation

I went all the path to svg

and through setTimeout I want to take turns to draw them

But I can't do it.

let path = document.querySelectorAll("svg path");

path.forEach(function (el, index){
  let nl = el.getTotalLength();
  el.setAttribute("stroke-dasharray", `0 ${nl}`);
  
  setTimeout(function (){
    el.setAttribute("stroke-dasharray", `${nl} ${nl}` + index);
  },2400)
})

path{
  fill: none;
  stroke: red;
  stroke-width: 2;
}

<svg viewBox="0 0 300 120" width="300">
  
  <path d="M20,30 100,30 290,0" />
  <path d="M20,50 100,50 290,17" />
  <path d="M20,70 100,70 290,34" />
  <path d="M20,90 100,90 290,51" />
  <path d="M20,110 100,110 290,68" />
  
</svg>

In my case, it turns out that all path are drawn at the same time .. And it is necessary separately

I want to get the effect of drawing a line like in smil with animate - in which lines are drawn in turn when using stroke-dasharray in javascript

https://codepen.io/topicstarter/pen/gOPMEWw

Teach how to do it

@RobertLongson want to get an animation of drawing as on smil only on javascript — MaximLensky, Jun 15 '20 at 02:35
Yes I know, but why bother, just use SMIL. That's why it exists, to make life easier so you don't have to do low level stuff like this. — Robert Longson, Jun 15 '20 at 02:37
@RobertLongson If, for example, there will be 300 pieces, SVG will reach huge sizes — MaximLensky, Jun 15 '20 at 02:41
So what? Browsers can and do optimise SMIL in ways they cannot optimise javascript. You can always create the SMIL elements via javascript. — Robert Longson, Jun 15 '20 at 02:53

score 1 · Answer 1 · answered Jun 15 '20 at 01:54

1

The loop runs so quickly it is effectively instantaneous, so all the resulting timeouts are 2400 ms from the same moment. One solution is to define a variable delay outside of the loop and slightly increase it on each iteration of the loop:

let path = document.querySelectorAll("svg path");

delay = 0;

path.forEach(function (el, index){
  delay += 500;
  let nl = el.getTotalLength();
  el.setAttribute("stroke-dasharray", `0 ${nl}`);
  
  setTimeout(function (){
    el.setAttribute("stroke-dasharray", `${nl} ${nl}` + index);
  }, delay)
})

path{
  fill: none;
  stroke: red;
  stroke-width: 2;
}

<svg viewBox="0 0 300 120" width="300">
  
  <path d="M20,30 100,30 290,0" />
  <path d="M20,50 100,50 290,17" />
  <path d="M20,70 100,70 290,34" />
  <path d="M20,90 100,90 290,51" />
  <path d="M20,110 100,110 290,68" />
  
</svg>

In this case the first setTimeout is for 500ms, the next for 1000ms, the one after that for 1500ms, and so on. You can adjust this to your needs.

answered Jun 15 '20 at 01:54

Alexander Nied

12,804
4
25
45

Looking at the resulting `path` elements, you are for certain setting `stroke-dasharray` attribute, but it appears the values you are setting it to are such that the effect cannot actually be observed. If you can describe the expected output I might be able to help you achieve it. – Alexander Nied Jun 15 '20 at 02:01
https://codepen.io/topicstarter/pen/gOPMEWw - that's the kind of behavior I want to achieve – MaximLensky Jun 15 '20 at 02:12
I believe this animation behavior is a result of the usage of the [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate) tag being used here, not the `stroke-dasharray`... – Alexander Nied Jun 15 '20 at 02:15
the same result is not possible to get on js ? – MaximLensky Jun 15 '20 at 02:17
It is possible, I was just not aware that that was the effect you were trying to achieve from your question. If that is what you wish [this post](https://stackoverflow.com/questions/14275249/how-can-i-animate-a-progressive-drawing-of-svg-path#14282391) provides a good example of how to accomplish it with JS. – Alexander Nied Jun 15 '20 at 02:23

How is it postponed to draw a path without libraries?

1 Answers1