Hi,

I need to animate a dashed line (using javascript) as it grows following the defined path. The final effect should be similar to this:


I think I have to define the whole path and then I have to draw only a part of it, for example, if exist, a parameter or style that accept a number from 0.0 to 1.0 where 0.0 doesn't draw anything and 1.0 draw the entire path.

best regards
Max

The usual approach to this is to fake the animation by defining a dashed stroke style then animating the stroke-dashoffset value. See this page for details:

https://css-tricks.com/svg-line-animation-works/

I already tried this, but there are two problems:
I need the growing line was dashed
The arrow at the end of line is drawn always at the end and doesn't move

best regards
Max

The dashed line could probably be dealt with by having a complex dasharray, twice the length of the line. One half would be defined to have the dashes you want, then other half to be blank.

As for the arrow, how about setting it as a mid-marker, rather than an end-marker, then also animating the location of the marker along the line.

Please note that I've never tried animating a line at all, let alone a dashed one with an arrow, so my suggestions might turn out to be a load of rubbish!

Hello

Following to Xav advice, you have to use a dasharray for the dashed path, and fro the triangle (or arrow) you have to use a shape along path effect. Both have to be synched.

Take a look to this sample:
http://codepen.io/mattsince87/pen/vdEbg

About the dashed path, I think that the information Xav provides in his first link is good. I'm not sure where exactly do you have problems. Try to share your code to have a better idea about what is going on

In order to put a shape in a path, You have to know more about to get the position of a point in a path:
https://developer.mozilla.org/es/docs/W ... athElement

I made a very basic use of this properties, when trying to animate a star in this sample:
http://hul78.deviantart.com/art/Anim-Xmas-421793584
You have to click in download, using a modern web browser (firefox or Chrome), and then make a click in the star that appears at the left.

It's easier if you use a specialized library, like GSAP or SNAP.