在SVG中将一个圆减去另一个圆 [英] Subtract one circle from another in SVG

问题描述

我正在尝试找到一种方法，在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中将一个圆减去另一个圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！