SVG ClipPath 用于剪掉*外部*内容

Question

通常， 元素会隐藏剪辑路径之外的所有内容。为了实现相反的效果 - 即从图像中“剪掉”某些内容 - 我想在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 在 iOS WebKit 中不起作用。

Answer 1

使用遮罩更容易完成您想要的操作，请参阅 此示例。这是遮罩定义：

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

遮罩内的白色区域将被保留，其他所有区域都将被剪掉。

这是另一个示例 使用 ClipPath 来代替，有点棘手，因为您需要使用路径元素来应用剪辑规则。使用clip-rule的clipPath看起来像这样：

<clipPath id="clipPath1">
  <path id="p1" d="M10 10l100 0 0 100 -100 0ZM50 50l40 0 0 40 -40 0Z" clip-rule="evenodd"/>
</clipPath>