Fill intersection of two circles

Question

I'm trying to draw two circles where the intersection has a different fill color.

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <g>
    <circle r="85" id="circle_left" cy="100" cx="100" stroke-width="1.5" stroke="#000" fill="none" />
    <circle r="85" id="circle_right" cy="100" cx="200" stroke-width="1.5"  stroke="#000" fill="none"/>
  </g>
</svg>

Is there a way to do this with mask?

Example png:

Answer 1

Define a clipPath consisting of the right circle and set it as the clip-path of the left (or the other way around):

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="mask_left">
            <circle r="85" id="circle_right" cy="100" cx="200" stroke-width="1.5"  stroke="#000" fill="none"/>
        </clipPath>
    </defs>
    <g>
        <circle r="85" id="center" cy="100" cx="100" fill="orange" clip-path="url(#mask_left)"/>
        <circle r="85" id="circle_left" cy="100" cx="100" stroke-width="1.5" stroke="#000" fill="none" />
        <circle r="85" id="circle_right" cy="100" cx="200" stroke-width="1.5"  stroke="#000" fill="none"/>
    </g>
</svg>

Or, if you don't want to re-define the same shapes:

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <circle r="85" id="circle_left" cy="100" cx="100"/>
        <circle r="85" id="circle_right" cy="100" cx="200"/>
        <clipPath id="mask_left">
            <use xlink:href="#circle_right" />
        </clipPath>
    </defs>
    <g>
        <use xlink:href="#circle_left" id="center" fill="orange" clip-path="url(#mask_left)"/>
        <use xlink:href="#circle_left" stroke-width="1.5" stroke="#000" fill="none"/>
        <use xlink:href="#circle_right" stroke-width="1.5" stroke="#000" fill="none"/>
    </g>
</svg>

If you want to use a mask (not really necessary, but you specifically asked for it), it would look almost identical.

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <circle r="85" id="circle_left" cy="100" cx="100"/>
        <circle r="85" id="circle_right" cy="100" cx="200"/>
        <mask id="mask_left">
            <use xlink:href="#circle_right" fill="white"/>
        </mask>
    </defs>
    <g>
        <use xlink:href="#circle_left" id="center" fill="orange" mask="url(#mask_left)"/>
        <use xlink:href="#circle_left" stroke-width="1.5" stroke="#000" fill="none"/>
        <use xlink:href="#circle_right" stroke-width="1.5" stroke="#000" fill="none"/>
    </g>
</svg>