如何在 Svg 中排除剪贴路径内的区域

Posted 2023-03-23

【中文标题】如何在 Svg 中排除剪贴路径内的区域

【英文标题】：How to Exclude Area inside of clippath in Svg

【发布时间】：2013-07-14 02:11:48

【问题描述】：

我想隐藏矩形之外的任何东西。 （这是我通过剪辑成功实现的）。但另一个条件是，“也隐藏黑色大圆圈内的任何东西”。现在我怎么能做到这一点？

在下面的例子中，'黄色圆圈'必须被消除'。

详情见下图

原文：-

期望：-

以下是我的 Svg 代码：-

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  >
<g>
 <rect x="50" y="50"   stroke="1" fill="red"/>
 <circle cx="180" cy="150" r="30" stroke="blue" />
</g>

<g clip-path = "url(#clip1)">
  <circle cx="180" cy="150" r="10" stroke="blue" fill="yellow" />
</g>

<clipPath id = "clip1">
             <rect x="50" y="50"   stroke="1" fill="red"/>
        </clipPath>

</svg>

【问题讨论】：

黑圈总是不透明的吗？如果是这样，您实际上不需要使用剪辑，只需确保将其放在顶部即可。

并非如此。重点是如何隐藏黑色圆圈边界内的任何内容。

那么有什么问题 - 按照 Erik 的建议在其他所有内容上画圆圈？

该解决方案仅适用于填充圆圈的情况。如果圆形属性“填充”设置为“无”怎么办。换句话说，它是透明的。现在我如何剪辑或隐藏元素？一种解决方案是循环每个元素并检查它是否位于圆圈中。这是不好的。 :(

这个问题非常相似：***.com/questions/3742479/…（问题是你需要创建一个“反向”剪辑路径来执行此操作，另一个问题显示如何执行此操作）

【参考方案1】：

Erik Dahlström 是对的，您的剪辑可以包括整个矩形和圆形的切口。这样，您与 #clip1 关联的任何内容都将在您的圈子区域内不可见。这是您的示例的样子：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  >
<g>
 <rect x="50" y="50"   stroke="1" fill="red"/>
 <circle cx="180" cy="150" r="30" stroke="blue" />
</g>

<g clip-path = "url(#clip1)">
  <circle cx="180" cy="150" r="10" stroke="blue" fill="yellow" />
</g>

<clipPath id = "clip1">
   <path d="M 50,50 l200 0 l0 200 l-200 0z M150,150 a30,30 1 0,0 60,0z M210,150 a30,30 1 0,0 -60,0z"/>
</clipPath>