SVG clipPath可以裁剪出“外部"内容 [英] SVG clipPath to clip the *outer* content out
问题描述
通常,<clipPath>
元素会隐藏超出剪辑路径的所有内容.为了达到相反的效果-即从图像中切出"某些东西-我想在clipPath和clip-rule="evenodd"
属性中使用两条路径.基本上,我想对剪辑路径进行异或"处理.
Normally, the <clipPath>
element hides everything that is outshide 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.
但是它不起作用.它显示了"ORed"区域:
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"/>
我的问题是AFAIK <mask>
在iOS WebKit中不起作用.
My problem is that AFAIK <mask>
doesn't work in iOS WebKit.
推荐答案
It's much easier to do what you're after with a mask, see this example. Here's the mask definition:
<mask id="maskedtext">
<circle cx="50%" cy="50%" r="50" fill="white"/>
<text x="50%" y="55%" text-anchor="middle" font-size="48">ABC</text>
</mask>
将保留蒙版内部为白色的区域,其他所有区域将被剪掉.
Regions that are white inside the mask will be kept, everything else will be clipped away.
这是另一个示例而不是使用clipPath,因为您需要使用path元素来应用clip-rule,所以它有点棘手.在那里使用clip-rule的clipPath看起来像这样:
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:
<clipPath id="clipPath1">
<path id="p1" d="M10 10l100 0 0 100 -100 0ZM50 50l40 0 0 40 -40 0Z" clip-rule="evenodd"/>
</clipPath>
这篇关于SVG clipPath可以裁剪出“外部"内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!