填充两个圆的交集

Question

我正在尝试绘制两个圆圈，其中交叉点具有不同的填充颜色。

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

有没有办法用面具做到这一点？

示例png：

Answer 1

定义一个由右侧圆圈组成的FileInputStream，并将其设置为左侧的clipPath（或相反的方式）：

clip-path

或者，如果您不想重新定义相同的形状：

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

如果你想使用面具（不是真的有必要，但你特别要求它），它看起来几乎完全相同。

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