defining a path but draw only a slice of it

Discuss SVG code, accessible via the XML Editor.
mastupristi
Posts: 6
Joined: Wed Sep 02, 2015 10:52 pm

defining a path but draw only a slice of it

Postby mastupristi » Thu Jul 28, 2016 8:46 pm

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:
path-arrow.gif
path-arrow.gif (18.27 KiB) Viewed 1984 times


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

User avatar
Xav
Posts: 967
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: defining a path but draw only a slice of it

Postby Xav » Thu Jul 28, 2016 8:57 pm

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/
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

mastupristi
Posts: 6
Joined: Wed Sep 02, 2015 10:52 pm

Re: defining a path but draw only a slice of it

Postby mastupristi » Thu Jul 28, 2016 9:00 pm

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

User avatar
Xav
Posts: 967
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: defining a path but draw only a slice of it

Postby Xav » Thu Jul 28, 2016 11:21 pm

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!
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

hulf2012
Posts: 715
Joined: Sat Nov 24, 2012 12:37 pm

Re: defining a path but draw only a slice of it

Postby hulf2012 » Fri Jul 29, 2016 12:53 am

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.
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.


Return to “SVG / XML Code”

Who is online

Users browsing this forum: No registered users and 1 guest