how to create a Dynamic SVG line path based on hover interaction.
Hello friends!
I am need to create a svg line path that animates in. along this svg path i have divs the shape of circles. This line path resembles a sine wave except that the amplitudes are flat on top.
I need to find a way that when i hover over one of these circles place along the line path the circle scales bigger while making the line path on the left and right side grow. I feel like this is a terrible explanation so please refer to images.
Any ideas on how to attack this? I am open to any ideas:)
2 Replies
Tracing a path is frequently done by manipulating
stroke-dasharray & stroke-dashoffset.
You create a dash array that has a blank space the length of your path followed by a dash the length of your path. Then you animate moving that dash to cover the path which gives the impression of tracing.
(See this cover art for an example. (There's an ~ 5 second delay before the animation kicks in.))
You can use pathLength="1" attribute on elements to make it easier to compute the dash array. (Otherwise you have to figure out the actual path length in image units.)
The hover is trickier. I'm pretty sure all mouse interactions are disabled when a SVG is inserted into the page using an <img/> tag.
You either have to inline it or use and <object> tag. If you do that, you can either use a CSS :hover selector, or set up a SMIL trigger on hover.Not too worried about tracing the path as that is usually pretty straight forward as you mentioned in your reply. Having the circle scale larger on hover and adjusting the actual line path is where i am struggling to wrap my brain around. I was thinking i could use javascript interpolation within the path its self. and change the necessary values dynamically could work but then making sure all the circles remain in position on the line path when it changes sounds like another hurtle. Never thought about using the object tag but will definitely look into it. the image i attached to this reply is me trying to wrap my head a around exactly what part of the linepath that needs to change/animate. I was hoping that someone has seen an effect like this somewhere else that i could replicate or at least get some ideas from to apply to my own situation.
