Question

我正试图在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)" />

Answer 1

你想要的面具。要创建<mask>，请制作想要保持白色的内容。你想隐形的东西会变成黑色。介于两者之间的颜色会产生半透明效果。

因此，生成的SVG与您的伪标记类似，如下所示：

＆＃13;

<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>

＆＃13;

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

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>

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

创建基本剪切路径后，您可以创建剪切路径 - 有关剪辑路径的信息，请参阅this MDN entry。

Answer 3

两个答案建议（1）使用＆lt; mask＆gt;或（2）使用“fill-rule = evenodd”属性从形状 A （A∖B）中减去形状 B 。

两个建议的答案都解决了问题中的“中间洞”（B⊆A）部分问题，但只有掩码方法是“咬合”的合理解决方案在“part （B⊈A）的一边。使用 evenodd 填充规则意味着两个形状被平等对待，因此第二个形状中与第一个形状不相交的部分将成为结果的一部分。为了从形状中咬出某些东西，“咬”形状必须与咬合的形状共享其边界的一部分。这在实践中可能很麻烦。

示例：为了从另一个圆圈中减去一个圆圈，您必须创建一个“咬”形状，即两个圆的交点。

掩模方法更为普遍。

Answer 4

| * |面具：用于减去对象：

| =＆GT; fill =“white”=＆gt;要显示的块 | =＆GT; fill =“black”=＆gt;要移除的块

| =＆GT; fill =“white”=＆gt;将显示块也放在掩膜标签内并填充白色
| =＆GT; fill =“black”=＆gt;将删除块放在掩码标记内并填充黑色

| :: |使用蒙版从大矩形移除中心小矩形的示例

<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>

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

4 个答案: