How can I merge two shapes in svg?

Question

For example, I have two shapes: circle and rectangle. I want to convert them into one figure. Is there any ways to do that in svg code?

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

Like this:

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You can make a <mask> or a <clipPath> from the two shapes and then use that to mask a third shape. You can then apply your drop shadow to that.

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

Note: if you are wondering why we are applying the drop shadow to a parent <g> here, it is because if we applied it directly to the <rect>, the drop shadow would be subject to the clip also.

How can I merge two shapes in svg?

Sign up