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)" />

Snuggle

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.

Recapitulate

Yes, this is what I am looking for. I hadn't thought of using two shapes in the mask. It works in my browser, but for the life of me, I can't get it to work in Inkscape. All it does is show just the big circle. Could it be a bug in Inkscape? – Snuggle

To answer my own question, it will work in Inkscape as long as a group contains the elements in the mask. – Snuggle

is there any way to change the colors? like what if I wanted the black circle piece to be white, and the middle circle to be translucent? – Jumbled

Yes of course. Just set the fill: <circle id="donut" r="100" cx="100" cy="100" mask="url(#hole)" fill="white" /> – Recapitulate

oh gosh... I played around with so many combinations on the masking objects, but not the masked...still very new to masking! Thanks a lot! – Jumbled

@Shivam Yes it does. However filters are applied before masks, so all you have to do is wrap it in a group and apply the filter to that instead. jsfiddle.net/86jnkr3L – Recapitulate

@PaulLeBeau thanks I made that in after effects because i couldn't get it working but now I can do that with SVG – Indeclinable

It took me a long time to figure out that the "100%" on the mask, and the hard coordinates of the black part of the mask, are global, not local to the object that uses the mask. – Scrumptious

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.

Wombat

Answer 3

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

Buckish

These unusual (and undefined) meta character groups make the answer less readable. I guess you want headings and lists? SO provides Markdown syntax for these. – Irtysh

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.

Bordereau

This doesn't really answer the original question. I'm afraid to stand as an answer that really is required. If either or both the other answers are deleted it would be hard to understand what you meant here. – Inappetence

@RobertLongson: Thank you for pointing this out. I was not aware that answers can be deleted. So I suppose mine is going to be deleted without need for any further action. – Bordereau

Why not just convert it to something that does answer the questions? – Inappetence

Answer 5

I do this

<svg height="400" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
    <clipPath id="sharedPoints">
        <circle cx="100" cy="100" r="100" />
    </clipPath>
    
</defs>

<defs>
  <mask id="hole">
    <rect width="100%" height="100%" fill="white"/>
    <circle r="50" cx="100" cy="100" fill="black"/>
  </mask>
</defs>
<g clip-path="url(#sharedPoints)" subtract-path="url(#hole)" mask="url(#hole)" >
<path d="m100 0 L100 100 200 0 Z" style="fill:blue;" transform="rotate(-90 100 100)" />
<path d="m100 0 L100 100 200 0 Z" style="fill:black;" transform="rotate(-45 100 100)"/>
<path d="m100 0 L100 100 200 0 Z" style="fill:green;" transform="rotate(0 100 100)" />
<path d="m100 0 L100 100 200 0 Z" style="fill:red;" transform="rotate(45 100 100)" />

and result is

Earley