Geek Answers Handbook

Using external svg with a clip in Firefox

I am trying to work with a clip in firefox.

I use 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 does not work. The only way I can get a clipping path to work in FF is if I put this CSS rule at the beginning of the document and SVG in the document. 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 SVG is correct with respect to the stylesheet, so I'm not sure what I'm doing wrong here.

Any ideas? Hooray!

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

+4
source share
1 answer

SVG . , , Firefox, : " XML . ".

, SVG i.e.

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

More articles:


All Articles