在SVG中从另一个圆减去一个圆

Question

我试图在SVG中找到一种从另一种形状中减去一种形状的方法,在中间创建一个洞或在它的侧面咬一口.有点像剪切路径,但我不想显示交叉点,而是要显示交叉点之外的其中一个部分.一个解决方案涉及使用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)" />

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>

我们正在用白色矩形填充面具,然后我们将黑洞放在我们想要的洞的位置.

Answer 2

诀窍是使用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>

它使用形状的填充规则属性来移除内部正方形 - 您可以根据需要调整使用贝塞尔曲线路径来创建圆形.

一旦创建了基本剪切路径,就可以创建一个剪切路径 - 请参阅此MDN条目以获取有关剪辑路径的信息.