1

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 http://www.omakadesign.com 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...)

UPDATE:

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

eobet
  • 273
  • 1
  • 3
  • 11
  • try some other examples like http://www.svgbasics.com/clipping.html or http://labs.sawyerhollenshead.com/lab/svg-clippath/ in your version of safary to compare results – Milche Patern May 15 '13 at 20:21
  • Take a look for browser support of SVG here : http://caniuse.com/#search=svg This might help explain your situation. – Milche Patern May 15 '13 at 20:28
  • Both examples work, but I tried to recreate the second example myself, with data from my own SVG file pasted into that example, and I couldn't get it to display in either Firefox or Safari, so that is what made my think I'm missing something basic... (btw, neither of those examples use external references which I really, really want to keep.) – eobet May 15 '13 at 20:31
  • Also, I looked at caniuse.com before and I couldn't find clip-path there. – eobet May 15 '13 at 20:32
  • Possibly related? http://stackoverflow.com/questions/16042387/svg-spritesheet-targeting-with-css – cimmanon May 15 '13 at 20:58

3 Answers3

3

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:

https://github.com/Modernizr/Modernizr/issues/213#issuecomment-1149691

(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).

eobet
  • 273
  • 1
  • 3
  • 11
1

Thank you for having that link to Modernizr's github!

For a note on if you are clipping an image, what's important is the path has to be inside the clipPath.

On a side note, if you export your SVG Code from Illustrator. Just make sure to use the actual path instead of this:

<defs>
  <path id="path" d="....">
</defs>
<clipPath id="clipping">
  <use xlink:href="#path"/>
</clipPath>
<image clip-path=url(#clipping) ...>

to the actual path like this...

<clipPath id="clipping">
  <path id="path" d="....">
</clipPath>
<image clip-path=url(#clipping) ...>

It will work in FF, Chrome, Safari, Opera and IE9 & 10. Here's the jsfiddle

Edit

The original issue now I realized is a slightly different problem than what I had... Which is using the svg path to clip an image outside of the svg as an img tag. Unfortunately, IE, even 10 didn’t work when I tried the exact same method. Therefore, if you have have a single image, best is to embed the image inside the svg itself instead of clipping an img tag with the path. That worked for IE9&10 and then some..

Mon
  • 61
  • 4
0

For second part of your question (..why these menus have both padding and margin on the bottom..) :

main.css line 95

nav a {
  background: none repeat scroll 0 0 #616161;
  color: white;
  display: block;
  font: 12px/20px Lucida Sans Unicode,Lucida Grande,Lucida Sans;
  margin-bottom: 10px;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
}
Milche Patern
  • 19,632
  • 6
  • 35
  • 52
  • Right, and if you scroll down to the min-width case on line 188, shouldn't that override this? – eobet May 15 '13 at 20:28
  • No. there must be an error in your .css file because it's not applied. line : 327 Invalid separator in shape definition. It must be a comma. http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.omakadesign.com%2Fcss%2Fmain.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en – Milche Patern May 15 '13 at 20:34
  • Perhaps if those are true errors in your .css, it might fix your page behavior. – Milche Patern May 15 '13 at 20:35
  • Line 327 is unaltered from a HTML5 boilerplate called Initializr (which I did not write). But even adding commas didn't change anything... I'll try to use your link and dig further. All other overrides do work, though, which is weird. – eobet May 15 '13 at 20:40
  • What i meant is when i inspect with firebug, i see that nav a {css} is top applied and no other class to override the setting. Sometimes this is related to an error in .css file witch breaks the rest of the css rendering. – Milche Patern May 15 '13 at 20:48
  • Using the Firefox web tools the inspector for me reveals that the computed css where I set the padding to 0px is for some reason overridden by the original statement instead... seemingly completely backwards! – eobet May 15 '13 at 21:54