SVG clipPath 将 *outer* 内容剪掉

Posted

技术标签:

【中文标题】SVG clipPath 将 *outer* 内容剪掉【英文标题】:SVG clipPath to clip the *outer* content out 【发布时间】:2011-06-16 14:56:43 【问题描述】:

通常,<clipPath> 元素会隐藏剪辑路径之外的所有内容。为了达到相反的效果——即从图像中“剪掉”一些东西——我想在 clipPath 和clip-rule="evenodd" 属性中使用两条路径。基本上,我想“异或”剪辑路径。

但它不起作用。它显示区域“ORed”:

<clipPath clip-rule="evenodd" id="imageclippath" clipPathUnits = "objectBoundingBox">
        <rect clip-rule="evenodd" x="0.3" y="0.3"   />
        <rect clip-rule="evenodd" x="0" y="0"   />
    </clipPath>     

 <rect clip-path="url(#imageclippath)" x="0" y="0"   fill="red"/>

编辑:

我的问题是 AFAIK &lt;mask&gt;ios WebKit 中不起作用。

【问题讨论】:

【参考方案1】:

戴上口罩做你想做的事要容易得多,请参阅this example。这是掩码定义:

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

蒙版内的白色区域将被保留,其他所有区域都将被剪掉。

这里的another example 使用了clipPath,这有点棘手,因为您需要使用路径元素来应用clip-rule。那里使用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>

【讨论】:

谢谢。我忘了补充一点,我无法让&lt;mask&gt; 在 iOS WebKit 上工作。使用&lt;path&gt; 是可行的,但很难通过点来指定椭圆。 您可以使用圆弧路径命令或几个曲线命令指定椭圆,请参阅w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands。

以上是关于SVG clipPath 将 *outer* 内容剪掉的主要内容,如果未能解决你的问题,请参考以下文章

如何调整 SVG 的 ClipPath 区域的大小?

如何调整 SVG 的 ClipPath 区域的大小?

SVG.js Mask覆盖和ClipPath裁剪

将 clipPath 应用到带有变换的 Image 元素时出现问题

9. svg学习笔记-裁剪和蒙版

如何使用 svg 剪辑路径?