如何合并 svg 中的两个形状？

Question

我有两种形状：圆形和矩形。想将它们转换成一个数字。有什么方法可以在 SVG 代码中做到这一点？

  <svg width="400" height="400">
     <defs>
    <g id="shape" fill="none" stroke="red">
      <rect x="40" y="50" width="40" height="70" />
      <circle cx="50" cy="50" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50"  />
  <use xlink:href="#shape" x="200" y="50" />

</svg>

像这样：

原文由 misterioss 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于任何寻找如何将两个轮廓形状组合成一个轮廓形状（而不是在组合形状上放置阴影）的实际问题的答案的人，这里是一个可能的解决方案：

 <svg width="400" height="400">
    <defs>
        <rect id="canvas" width="100%" height="100%" fill="white" />
        <rect id="shape1" x="40" y="50" width="40" height="70" />
        <circle id="shape2" cx="50" cy="50" r="50" />
        <mask id="shape1-cutout">
            <use href="#canvas"  />
            <use href="#shape1"  />
        </mask>
        <mask id="shape2-cutout">
            <use href="#canvas"  />
            <use href="#shape2"  />
        </mask>
    </defs>
    <use href="#shape1" stroke="red" fill="none" mask="url(#shape2-cutout)" />
    <use href="#shape2" stroke="red" fill="none" mask="url(#shape1-cutout)" />
</svg>

这本质上是用矩形切出的圆绘制圆，并用圆切出的矩形绘制矩形。当您将这些“冲压出”的形状一个放在另一个之上时，您会得到看起来像是一个单一轮廓的形状。

这是 SVG 实际执行的操作：

1. 它定义了一个称为“画布”的白色矩形，其大小与 SVG 相同。
2. 它定义了要组合的两个形状（“shape1”和“shape2”）。
3. 它为每个形状定义一个蒙版，将画布（填充为白色）与形状（默认填充为黑色）组合在一起。请注意，当您将遮罩应用于形状时，会显示与遮罩的白色区域对应的形状部分，而与黑色部分对应的部分会隐藏。
4. 它绘制每个形状并应用另一个形状的蒙版。

原文由 devuxer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以从这两个形状制作一个 <mask> 或一个 <clipPath> 然后用它来掩盖第三个形状。然后你可以应用你的阴影。

 <svg width="400" height="400">
  <defs>
    <clipPath id="shape">
      <rect x="40" y="50" width="40" height="70" />
      <circle cx="50" cy="50" r="50" />
    </clipPath>

    <filter id="shadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
      <feOffset dx="3" dy="3"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <g filter="url(#shadow)">
    <rect width="100%" height="100%" fill="red"
          clip-path="url(#shape)"/>
  </g>

</svg>

注意：如果你想知道为什么我们在这里将阴影应用到父 <g> ，那是因为如果我们直接将它应用到 <rect> ，投影将受到剪辑也。

原文由 Paul LeBeau 发布，翻译遵循 CC BY-SA 3.0 许可协议