DrawSVG doesn't work when using a mask in Edge

[BGDDT]

See pen - I am using a mask to create the effect that looks like I have cut a hole with a path shape in the blue box to show grey background behind it. I am then using DrawSVG to animate this. All is working fine except on Edge browser. If you comment out the opening and closing mask tag then the DrawSVG animation works fine in Edge. Has anyone come across this issue before when using masks?

 

Thanks!

See the Pen BGYgLQ by anon (@anon) on CodePen

[PointC]

Hi @merchantcantos 

 

Welcome to the forum.

 

Edge is super duper fussy when it comes to masks. (& many other things) The main thing to try with Edge when you have a drawSVG mask is to add a tiny rotation that will force Edge to draw it correctly. I wrote about that here.

 

Edge also doesn't like when you group things in a mask element. Another thing I always recommend is to mask a group rather than an individual element. Even if you only have one shape, I still recommend grouping it and masking the group. Here's a fork of your pen with those changes. It seems to be working correctly in Edge for me.

 

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

Hopefully that helps. Happy tweening and welcome aboard.

 

[BGDDT]

@PointC That did the trick! Thanks so much for your reply ?