How can I combine two forms in svg?

Question

I have two shapes: a circle and a rectangle. I want to turn them into one figure. Are there any ways to do this 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:

Answer 1

You can make <mask> or <clipPath> from two forms, and then use this to mask the third shape. Then you can apply a shadow to it.

 <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 apply the shadow to the parent <g> here, this is because if we apply it directly to the <rect> , the drop drop will also be subject to the clip.

Answer 2

What is wrong with dropbadow in a group around shapes?

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

Answer 3

For anyone who is looking for an answer to the urgent question of how to combine two outline shapes into one outline shape (rather than casting a shadow on a combined shape), here is a possible solution:

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

This essentially draws a circle with a rectangular shape cut out of it and draws a rectangle with a circle cut out of it. When you put these “cut-out” shapes on top of each other, you get what looks like a single outline shape.

Here is what SVG actually does:

1. It defines a white rectangle called a “canvas” that is the same size as the SVG.
2. It defines two shapes that should be combined ("shape1" and "shape2").
3. It defines a mask for each shape that combines the canvas (with white fill) with the shape (with black fill by default). Note that when you apply a mask to a figure, that part of the figure that matches the white area of ​​the mask is displayed, and that part that matches the black part is hidden.
4. He draws each figure with a mask of another figure.