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

Answer 1

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

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.