celli Posted August 2, 2020 Share Posted August 2, 2020 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 More sharing options...
PointC Posted August 2, 2020 Share Posted August 2, 2020 Hey @celli Please give this a try: <mask id="penBoxLineMaskMaster" maskUnits="userSpaceOnUse"> <path class="penBoxLineMask" d="M10.07,10.08h151.81"/> </mask> More details in my dashed line article. https://www.motiontricks.com/svg-dashed-line-animation/ Happy tweening. 2 Link to comment Share on other sites More sharing options...
celli Posted August 2, 2020 Author Share Posted August 2, 2020 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 More sharing options...
PointC Posted August 2, 2020 Share Posted August 2, 2020 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now