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

|*| Mask : Used to Subtract Objects :

|=> fill="white" => Blocks to display
|=> fill="black" => Blocks to Remove

|=> fill="white" => Put the Display Block also inside mask tag and fill white
|=> fill="black" => Put the Remove Block inside mask tag and fill black

|::| Example to use mask to remove center small rect from large rect

<rect x="20" y="20" width="60" height="60" mask="url(#rmvRct)"/>
<mask id="rmvRct">
    <rect x="20" y="20" width="60" height="60" fill="white"/>
    <rect x="40" y="40" width="20" height="20" fill="black"/>
</mask>

|::| Example to use mask to remove center small circle from large circle :

<circle cx="50" cy="50" r="45" mask="url(#rmvCir)"/>
<mask id="rmvCir">
    <circle cx="50" cy="50" r="45" fill="white"/>
    <circle cx="50" cy="50" r="25" fill="black"/>
</mask>

Answer 2

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 3

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.

Answer 4

Two answers suggest to (1) use a <mask> or (2) use the “fill-rule=evenodd” attribute to subtract a shape B from a shape A (A ∖ B).

Both suggested answers solve the “hole in the middle” (B ⊆ A) part of the question but only the mask approach is a reasonable solution for the “bite out of the side” part (B ⊈ A). Using the evenodd fill-rule means the two shapes are treated equally, so the part of the second shape that does not intersect the first one will be part of the result. In order to bite something out of a shape the “biting” shape would have to share part of its border with the bitten shape. This might be cumbersome to achieve in practice.

An example: In order to subtract a circle from another circle you would have to create a “biting” shape that is the intersection of two circles.

The mask approach is much more universal.