Question

我正在尝试删除img元素的角落：

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

但是图像消失了吗？！

我希望红色标记的区域将被“删除”/消失，我不会让它工作： alt text

Answer 1

首先，确保您的文档是XHTML，而不是HTML。否则，SVG剪辑将不起作用。修复您的网址，使用&代替&。

然后，删除clipPathUnits="objectBoundingBox"，否则您将无法获得绝对坐标。最后，使用以下几点来修复路径，这些点应该得到您需要的形状：0,20 125,0 250,20 375,0 500,20 500,300 0,300。

最终文件如下：

<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&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" />
   </svg:clipPath>
 </svg:svg>

</body>
</html>

Firefox SVG：Clip

1 个答案: