Search code examples
cssfirefoxsvgclip

using an external svg with clip-path in Firefox

I'm trying to work with clip-path in firefox.

I'm using the following CSS in an external file:

.featured_event_panel{
  background:url(../images/home/screen2.jpg) repeat;
  background-position:center 50%;
  -webkit-clip-path: polygon(0 100%,100% 100%,100% 0%,50% 10%, 0 0);
  clip-path: url('../images/ui/clippath.svg#diamond');
  width:100%;
  padding:100px 0 150px;
  position:relative;
}

This doesn't work. The only way I can get the clipping path to work in FF is if I put this CSS rule in the head of the document and the SVG in the document too. The SVG is below:

<svg>
  <defs>
   <clipPath id="diamond" clipPathUnits="objectBoundingBox">
      <polygon points="0 1, 1 1, 1 0, .5 .1, 0 0" />
    </clipPath>
  </defs>
</svg>

The path to the SVG is right relative to the stylesheet so I'm not sure what I'm doing wrong here.

Any ideas? Cheers!

EDIT: Example: http://jsfiddle.net/25VQD/

Solution

  • Your clip path is not a valid SVG file. The clue is that when you display it directly in Firefox it says "This XML file does not appear to have any style information associated with it. The document tree is shown below."

    To fix it you'd need to add the SVG namespace to the root element i.e.

    <svg xmlns="http://www.w3.org/2000/svg">