Rectangle 27 0

Firefox SVG: Clip?

<html xmlns="" xmlns:svg="">
 <style type="text/css">
 #div { background: #ffffff; width: 500px; height: 300px; padding: 10px; }
 #div img { background: #000000; }

 <div id="div"><img src=",-73.998672&amp;zoom=14&amp;size=500x300&amp;sensor=false" alt="" class="t" /></div>

 <style>.t { clip-path: url(#c1); }</style>
 <svg:svg height="0">
   <svg:clipPath id="c1">
     <svg:polyline points="0,20 125,0 250,20 375,0 500,20 500,300 0,300" />


First, make sure your document is served as XHTML, not HTML. SVG clipping won't work otherwise. Fix your URL to use instead of &.

Then, remove the clipPathUnits="objectBoundingBox" or you won't get absolute coordinates. Finally, fix your path by using the following points which should get the shape you need: 0,20 125,0 250,20 375,0 500,20 500,300 0,300.