如何排除Svg中的clippath区域

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

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