using an external svg with clip-path in Firefox

Question

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/

The clip-path must be same domain as the document so the jsfidlle won't work as it stands. — Robert Longson, Jul 18 '14 at 12:29
I see. I can't do the proper demo with jsfiddle at all then but the code is there. — BarryWalsh, Jul 18 '14 at 12:36

score 3 · Accepted Answer · answered Jul 18 '14 at 13:06

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">

using an external svg with clip-path in Firefox

1 Answers1

Linked