drawSVG with Gradients

[jh2k314 0 Likes (Newbie)]

If someone could help...when I load my page, my drawSVG works fine, but I cannot get a gradient to fill in the country when the drawSVG completes.  I'm sure it's something small I'm missing, could use a second perspective.  

 

Thanks

See the Pen mLGReQ by jh314 (@jh314) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi @jh2k314

 

Welcome to the forum.

 

I'm not sure I understand the desired outcome here. DrawSVG only works with strokes and none of your paths have a stroke. Your demo is also missing the DrawSVG plugin. For SVG paths, you'd want to use 'fill' instead of 'background'. Or were you trying to change the background of the parent div? I couldn't quite tell what should be happening in the second tween on the timeline.

 

If you could provide some more details about what you'd like to happen, we can point you in the right direction.

 

Happy tweening.

 

[jh2k314 0 Likes (Newbie)]

PointC,

 

Thank you for the corrections, I made the adjustments.  What I'm trying to do, is when the web page loads, the drawSVG plugin will outline the country, (in my example I'm using Canada and the USA), after it completes drawing the stroke around the country I'm trying to fill that country with a gradient.  

I've tried the fromTo tween, not working.  Not sure what I'm missing or if you or anyone else knows of a better way to accomplish this.

 

Much thanks,

[PointC 8,599 Likes (Superhero)]

Okay, looks like you have the DrawSVG part working now. If you want to animate from a solid fill to a gradient on a path, you'll want to animate the stop-color of your gradient. Here's a quick example.

 

See the Pen bMxqYR by PointC (@PointC) on CodePen

 

See how it's not actually animating the fill of the path, but rather the stop-color of the gradient? The path fill is always the gradient. We're just changing the gradient stops to the same color. Does that help?

 

Happy tweening.