用于剪切*outer*内容的SVG clipPath

Question

通常,<clipPath>元素会隐藏夹子路径以外的所有内容.为了达到相反的效果 - 即从图像中"剪切"某些东西 - 我想在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 <mask>在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 的示例,因为您需要使用path元素来获取要应用的剪辑规则,所以有点棘手.使用剪辑规则的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>