Html – What could make Safari skip clip-path AND mask with SVG


I don't have any problems using clip-path with links to .svg files in Firefox, but Safari seemingly refuses to use them.

If you load my WIP page in Firefox, you will see a butterfly pattern at the bottom of the menu, but if you load it in Safari, the menus are completely rectangular.

The relevant line appears in main.css (221) and looks like:

    clip-path: url("../img/menu-news.svg#news-clip");

There seems to be very little information about clip-path and Safari, and not many questions about it on this site either (believe me I've looked). But then again, I can't even get the most basic inline svg example with clip-path to work even in Firefox, so perhaps there is something fundamental I'm missing on this topic?

(Also, though this is another subject, why these menus have both padding and margin on the bottom is a mystery to me since I zero them out using min-width…)


I did a test and created a .svg with a mask tag in it and replaced the clip-path line that appears above with a css mask instead (still 221 if you want to try it with the Firefox Style Editor) and amazingly that still works in Firefox and Safari STILL skips over it:

    mask: url("../img/menu-news-mask.svg#news-mask");

(Final update: Found the solution, but I'm not allowed to post it for another 5 hours… turns out, you have to use very, very specific SVG and use -webkit-mask for Safari.)

Best Solution

I found the solution. You have to use VERY SPECIFIC SVG code! Follow the example of this guy to the letter, and clipping will work in Safari too:

(Sorry about posting my own answer for my own first question, but I was really desperate and I usually find that when you start asking others, that's when you stumble upon the solution...)

EDIT: Doesn't work in IE9, which I don't really care about, but just a heads up for those who do (the fallback is simply a plain rectangular menu for me which still works).

Related Question