如何在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>

像这样:

Answer 1

您可以从两个形状中制作一个<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>,那么投影也会受到剪辑的影响.

Answer 2

对于寻求有关如何将两个轮廓形状组合为单个轮廓形状（而不是在组合形状上放置阴影）的实际问题的答案的人，这是一个可行的解决方案：

<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. 它定义了一个称为“ canvas”的白色矩形，其大小与SVG相同。
2. 它定义了要组合的两个形状（“ shape1”和“ shape2”）。
3. 它为将画布（具有白色填充）和形状（默认具有黑色填充）组合在一起的每种形状定义一个蒙版。请注意，将遮罩应用于形状时，将显示与遮罩的白色区域相对应的形状部分，而与黑色部分相对应的部分则被隐藏。
4. 它使用其他形状的遮罩绘制每个形状。

Answer 3

只是形状周围的一组阴影有什么问题？

    <svg width="400" height="400">
  <defs>   
    <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 x="40" y="50" width="40" height="70" fill="red"/>
      <circle cx="50" cy="50" r="50" fill="red"/>
  </g>

</svg>