问题描述
我正在尝试找到一种方法，在SVG中从一种形状中减去一种形状，在中间形成一个孔或从其侧面咬一口.有点像剪切路径，但我不想显示相交，而是要显示相交之外的零件之一. 一种解决方案涉及使用Adobe Flex，但我确实做到了不知道如何正确实施.我知道在Inkscape中可以使用布尔路径操作来做到这一点，但我想保持圆形元素不变，而不是将其更改为路径元素.
I'm trying to find a way to subtract one shape from another in SVG, creating a hole in the middle or a bite out of the side of it. Kind of like a clipping path, but instead of showing the intersection, I want to show one of the parts outside the intersection. One solution involved using Adobe Flex, but I did not know how to implement it properly. I understand that there is a way to do this in Inkscape using boolean path operations, but I want to keep the circle elements the way they are instead of changing them into path elements.
<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>，请使您想要保持白色的东西.您希望看不见的东西变黑.两者之间的颜色会导致半透明.
A mask is what you want. To create a <mask>, make things you want to keep white. The things you want to be invisible make black. Colours in between will result in translucency.
因此，生成的SVG与您的伪标记相似，如下所示:
So the resulting SVG is similar to your pseudo-markup and looks like this:
<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>我们用白色矩形填充蒙版，然后在要孔的位置放一个黑色圆圈.
We are filling the mask with a white rectangle, and then we put a black circle where we want the hole to be.
这篇关于在SVG中将一个圆减去另一个圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！