我正在尝试找到一种方法，在 SVG 中从另一个形状中减去一个形状，在中间创建一个洞或从它的侧面咬出一个洞。有点像剪切路径，但不是显示交叉点，我想显示交叉点外的一个部分。 One solution 涉及使用 Adobe Flex，但我不知道如何正确实施。我知道在 Inkscape 中有一种方法可以使用布尔路径操作来执行此操作，但我想保持圆形元素的原样，而不是将它们更改为路径元素。
<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)" />
【问题讨论】：
诀窍是使用fill-rule 来控制剪辑路径的显示。一个（方形）甜甜圈的例子是
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="300" height="300">
<defs>
</defs>
<g transform="translate(50, 50)">
<path d="M 0 0 L 0 200 L 200 200 L 200 0 z
M 50 50 L 50 150 L 150 150 L 150 50 z" fill-rule="evenodd"/>
</g>
</svg>
这使用形状的填充规则属性来删除内部正方形 - 您可以调整它以使用贝塞尔路径来完成，以根据需要创建一个圆。
创建基本剪辑路径后，您可以从中创建剪辑路径 - 有关剪辑路径的信息，请参阅 this MDN entry。
【讨论】：
面具就是你想要的。要创建<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>我们用一个白色矩形填充蒙版，然后在我们想要的孔位置放置一个黑色圆圈。
【讨论】：
<circle id="donut" r="100" cx="100" cy="100" mask="url(#hole)" fill="white" />
两个答案建议 (1) 使用
两个建议的答案都解决了问题的“中间的洞”(B ⊆ A) 部分，但只有 mask 方法是解决“咬伤”的合理解决方案出边”部分(B ⊈ A)。使用 evenodd 填充规则意味着两个形状被平等对待，因此第二个形状不与第一个相交的部分将成为结果的一部分。为了咬出某种形状，“咬”形状必须与被咬形状共享部分边界。这在实践中可能很难实现。
一个例子：为了从另一个圆中减去一个圆，您必须创建一个“咬合”形状，它是两个圆的交点。
掩码方法更为普遍。
【讨论】：
|*|蒙版：用于减去对象：
|=> fill="white" => 要显示的块
|=> fill="black" => 要删除的块
|=> fill="white" => 将显示块也放在掩码标签内并填充白色
|=> fill="black" => 将 Remove Block 放在 mask 标签内并填充黑色
|::|使用掩码从大矩形中删除中心小矩形的示例
<rect x="20" y="20" width="60" height="60" mask="url(#rmvRct)"/>
<mask id="rmvRct">
<rect x="20" y="20" width="60" height="60" fill="white"/>
<rect x="40" y="40" width="20" height="20" fill="black"/>
</mask>
|::|使用掩码从大圆中删除中心小圆的示例：
<circle cx="50" cy="50" r="45" mask="url(#rmvCir)"/>
<mask id="rmvCir">
<circle cx="50" cy="50" r="45" fill="white"/>
<circle cx="50" cy="50" r="25" fill="black"/>
</mask>
【讨论】：