我试图找到一种方法,在 SVG 中从另一个形状中减去一个形状,在中间创建一个洞或从它的侧面咬一口。有点像剪切路径,但不是显示交叉点,我想显示交叉点外的一个部分。 One solution涉及使用 Adobe 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)" />
最佳答案
口罩就是你想要的。创建一个 <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>
我们用白色矩形填充蒙版,然后在我们想要孔的位置放置一个黑色圆圈。
关于svg - 在SVG中从另一个圆圈中减去一个圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22579508/