Subtract one circle from another in SVG

Question

I'm trying to find a way to subtract one shape from another in SVG, creating a hole in the middle or a bite out of the side of it. Kind of like a clipping path, but instead of showing the intersection, I want to show one of the parts outside the intersection. One solution involved using Adobe Flex, but I did not know how to implement it properly. I understand that there is a way to do this in Inkscape using boolean path operations, but I want to keep the circle elements the way they are instead of changing them into path elements.

<defs>     <subtractPath id="hole">         <circle r="50" cx="100" cy="100" />     </subtractPath> </defs> <circle id="donut" r="100" cx="100" cy="100" subtract-path="url(#hole)" /> 

Answer 1

A mask is what you want. To create a <mask>, make things you want to keep white. The things you want to be invisible make black. Colours in between will result in translucency.

So the resulting SVG is similar to your pseudo-markup and looks like this:

<div style="background: #ddf">    <svg width="200" height="200">      <defs>        <mask id="hole">          <rect width="100%" height="100%" fill="white"/>          <circle r="50" cx="100" cy="100" fill="black"/>        </mask>      </defs>        <circle id="donut" r="100" cx="100" cy="100" mask="url(#hole)" />      </svg>  </div>

We are filling the mask with a white rectangle, and then we put a black circle where we want the hole to be.

Answer 2

The trick is to use fill-rule to control the display of a clip-path. A (square) donut example would be

<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  <svg xmlns="http://www.w3.org/2000/svg"  width="300" height="300"> <defs> </defs>    <g transform="translate(50, 50)">       <path d="M 0 0 L 0 200 L 200 200 L 200 0 z                M 50 50 L 50 150 L 150 150 L 150 50 z" fill-rule="evenodd"/>    </g> </svg> 

That uses the fill-rule property of shapes to remove the inner square - you could adjust that to be done with bezier paths to create a circle as required.

Once you've got the basic clipping path created, you can create a clipping path out of it - see this MDN entry for info on clip-path.