svg - 在SVG中从另一个圆圈中减去一个圆圈

Question

我试图找到一种方法，在 SVG 中从另一个形状中减去一个形状，在中间创建一个洞或从它的侧面咬一口。有点像剪切路径，但不是显示交叉点，我想显示交叉点外的一个部分。 One solution涉及使用 Adob​​e Flex，但我不知道如何正确实现它。我知道有一种方法可以在 Inkscape 中使用 bool 路径操作来做到这一点，但我想保持圆形元素的原样，而不是将它们更改为路径元素。

<defs>
    <subtractPath id="hole">
        <circle r="50" cx="100" cy="100" />
    </subtractPath>
</defs>
<circle id="donut" r="100" cx="100" cy="100" subtract-path="url(#hole)" />

Answer 1

口罩就是你想要的。创建一个 <mask> ，让你想要保持白色的东西。你想要隐形的东西会变黑。介于两者之间的颜色将导致半透明。

因此生成的 SVG 类似于您的伪标记，如下所示:

<div style="background: #ddf">
  <svg width="200" height="200">
    <defs>
      <mask id="hole">
        <rect width="100%" height="100%" fill="white"/>
        <circle r="50" cx="100" cy="100" fill="black"/>
      </mask>
    </defs>

    <circle id="donut" r="100" cx="100" cy="100" mask="url(#hole)" />

  </svg>
</div>

我们用白色矩形填充蒙版，然后在我们想要孔的位置放置一个黑色圆圈。