SVG clipPath 将 *outer* 内容剪掉 [英] SVG clipPath to clip the *outer* content out

问题描述

通常， 元素会隐藏剪辑路径之外的所有内容.为了达到相反的效果——即从图像中剪下"一些东西——我想在 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 在 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 代替，有点棘手，因为您需要使用路径元素来应用剪辑规则.使用剪辑规则的剪辑路径如下所示:

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 将 *outer* 内容剪掉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！