Draw a voided shape in SVG

Question

I want to draw a shape in SVG that has the centre hollowed out. I asked this question for drawing a circle with a circle in the middle here. I would like to draw any shape in SVG with the middle (of another shape) hollowed out. Any ideas?

I'm thinking it could be possible using Masks or ClipPaths but I'm not sure if I understand them fully

Answer 1

Create your shape as a path, which consists of two sub-paths. The first subpath describes your outer shape; the second subpath describes the inside shape. Set the fill-rule of the pathto 'evenodd'.

e.g. for a hollowed out rectangle, we make a path consisting of two sub-paths. One for the outside rectangle; one for the inner rectangle:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<path d="M 100 100 L 200 100 L 200 200 L 100 200 z
     M 110 110 L 190 110 L 190 190 L 110 190 z"
     fill="red"
     stroke="black" stroke-width="1"
     fill-rule="evenodd"/>

</svg>