Jump to content
Search Community

DrawSVG animating dashed path

celli test
Moderator Tag

Recommended Posts

Hi, I understand from the SVG Gotchas post about animating dashed-stroked with the DrawSVG plugin, and from studying PointC's demo here 

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

 .

 

I setup my path with a duplicate path that I can use as a mask to animate my dashed path, which seems straightforward and simple, but I still can't seem to get it to work and mask-in my dashed line. Does anyone know what I am doing wrong in my reduced codePen?

See the Pen oNbKrzL by celli (@celli) on CodePen

Link to comment
Share on other sites

Thank You PointC!

 

I added maskUnits="userSpaceOnUse" and it works now. Do I need that for every mask created?

 

I read your article on motionTricks as well (very nice, thank you!!),  In your article it says to wrap my masks in <defs></defs> tags, should  I do this with all SVG masks ?

 

 

Link to comment
Share on other sites

I would recommend using the maskUnits on all masks. It'll prevent some weirdness.

 

21 minutes ago, celli said:

In your article it says to wrap my masks in <defs></defs> tags, should  I do this with all SVG masks ?

The mask element won't render no matter where you put  it so it's not absolutely necessary. I'm in the habit of placing my masks, clip-paths, gradients, patterns, etc. all in the <defs> element. I find it to be a good practice and it's easier for me to find everything. Just my two cents. YMMV.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...