Jump to content
Search Community

Issues with SVG clip-path animations in Safari

michelleenos test
Moderator Tag

Recommended Posts

I have an animation using CSS/SVG clip paths (the clips are defined in SVG but referenced in CSS). I want to be able to animate the paths to reveal different content. This works great in Chrome & Firefox, but in Safari it either does not work at all or sort of half-works and looks clearly broken.

 

I've tried and rejected lots of alternatives (using a mask instead, defining everything in SVG instead of using CSS at all, etc etc) and I really wanted this one to work. Is there any fix for this?

 

(codepen is a super simplified example just to demonstrate what I am trying to do)

See the Pen KKXBbvO?editors=1111 by crankysparrow (@crankysparrow) on CodePen

Link to comment
Share on other sites

In case anyone finds this looking for a solution, here's a couple things I ended up figuring out, partly based on the responses linked above:

  • It seems to make some difference whether the SVG element has a viewbox attribute, and whether the SVG element itself has sizes set on it via CSS. In the CodePen example above, it works in Safari if I remove the viewBox and set width & height of the SVG both to 100% in CSS. In my own project, this sometimes made a difference and sometimes not, depending on what else I adjusted. Not quite sure of the particulars but worth it to play around with if you are dealing with this issue!
  • The trick described here of adding a 1px <rect> into the <clipPath> element almost worked. It did work in the CodePen example I set up. In my own project, this made the issues better but still didn't really solve it. I'm clipping both images and text etc in that project, and sometimes the images have to be transformed/scaled as well, so maybe there was just too much going on for this trick to be effective.
  • Adding an onUpdate function to force re-rendering on update, as described here, totally works. For performance reasons it's obviously not my favorite solution, but after hours of pulling my hair out over this I'm happy with it!
  • Like 4
Link to comment
Share on other sites

  • 6 months later...

A super amateur hour mistake to watch out for.

 

If you have more than one SVG on your page, make sure you give your clippaths UNIQUE ID's!!! 

 

Illustrator will give the clip paths an ID of "clippath" so just make sure they're unique. This will break clipmasks.

  • 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...