SVG ClipPath 用于剪掉*外部*内容
通常，clip-rule="evenodd"属性中使用两个路径。基本上，我想“异或”剪辑路径。
但这不起作用。它显示区域“ORed”：
<clipPath clip-rule="evenodd" id="imageclippath" clipPathUnits = "objectBoundingBox">
<rect clip-rule="evenodd" x="0.3" y="0.3" height="0.6" width="6" />
<rect clip-rule="evenodd" x="0" y="0" height="0.5" width="0.5" />
</clipPath>
<rect clip-path="url(#imageclippath)" x="0" y="0" height="500" width="500" fill="red"/>
编辑：
我的问题是 AFAIK
Normally, the <clipPath> element hides everything that is outside the clip path. To achieve the opposite effect - that is to "cut out" something from the image - i want to use two paths in the clipPath and the clip-rule="evenodd" attribute. Basically, I want to "xor" the clip paths.
But it doesn't work. It shows the region "ORed":
<clipPath clip-rule="evenodd" id="imageclippath" clipPathUnits = "objectBoundingBox">
<rect clip-rule="evenodd" x="0.3" y="0.3" height="0.6" width="6" />
<rect clip-rule="evenodd" x="0" y="0" height="0.5" width="0.5" />
</clipPath>
<rect clip-path="url(#imageclippath)" x="0" y="0" height="500" width="500" fill="red"/>
EDIT:
My problem is that AFAIK <mask> doesn't work in iOS WebKit.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
使用遮罩更容易完成您想要的操作，请参阅 此示例。这是遮罩定义：
遮罩内的白色区域将被保留，其他所有区域都将被剪掉。
这是另一个示例 使用 ClipPath 来代替，有点棘手，因为您需要使用路径元素来应用剪辑规则。使用clip-rule的clipPath看起来像这样：
It's much easier to do what you're after with a mask, see this example. Here's the mask definition:
Regions that are white inside the mask will be kept, everything else will be clipped away.
Here's another example that uses clipPath instead, is a bit trickier since you need to use a path element to get the clip-rule to apply. The clipPath that uses clip-rule there looks like this: