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

Question

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

在下面的示例中，必须消除“黄色圆圈”。

有关详细信息，请参见下图

• 原来的：-

期望：-

以下是我的 Svg 代码：-

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
<g>
 <rect x="50" y="50" width="200" height="200" 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" width="200" height="200" stroke="1" fill="red"/>
        </clipPath>

</svg>

Answer 1

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
<g>
 <rect x="50" y="50" width="200" height="200" 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>