Firefox SVG: Clip
I'm trying to delete the corners of an img element:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<body>
<style type="text/css">
#div { background: #ffffff; width: 500px; height: 300px; padding: 10px; }
#div img { background: #000000; }
</style>
<div id="div"><img src="http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=14&size=500x300&sensor=false" alt="" class="t" /></div>
<style>.t { clip-path: url(#c1开发者_如何学Go); }</style>
<svg:svg height="0">
<svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
<svg:polyline x="0" y="0" width="0.5" height="0.5" points="0,60 20,20 40, 100, 60,40, 80,100, 100,40 120,100" fill="red" stroke="black" />
</svg:clipPath>
</svg:svg>
</body>
</html>
But the image disapears?!
I wanted that the red marked areas will be "removed"/disapear and I don't get it work:
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.
The final document will look like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<body>
<style type="text/css">
#div { background: #ffffff; width: 500px; height: 300px; padding: 10px; }
#div img { background: #000000; }
</style>
<div id="div"><img src="http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=14&size=500x300&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" />
</svg:clipPath>
</svg:svg>
</body>
</html>
加载中,请稍侯......
精彩评论