Starting with 2 intersecting circles, we want to show the intersection in different ways. First we simply make the intersection slice black.
The code to do this is available in the previous page, so no need to duplicate it here.
Next, we use a linear gradient, going from red to blue (opposite of the 2 circles).
<defs>
<circle id="circle" cx="250" cy="250" r="75"/>
<linearGradient id="linear">
<stop offset="0%" style="stop-color:red;"/>
<stop offset="100%" style="stop-color:blue;"/>
</linearGradient>
</defs>
<use xlink:href="#circle" x="-50" fill="blue" />
<use xlink:href="#circle" x="+50" fill="red"/>
<clipPath id="clip-left">
<use xlink:href="#circle" x="-50"/>
</clipPath>
<clipPath id="clip-right">
<use xlink:href="#circle" x="+50"/>
</clipPath>
<g clip-path="url(#clip-left)">
<use xlink:href="#circle" x="+50" style="fill: url(#linear);"/>
</g>
To illustrate the autonomy of using the clipping process, in the bottom illustration we put a maroon border around the 2 circles, and a white border around the intersection, which we've colored salmon.
<defs>
<circle id="circle3" cx="250" cy="410" r="75"/>
</defs>
<use xlink:href="#circle3" x="-50" fill="blue" stroke-width="3" stroke="maroon" />
<use xlink:href="#circle3" x="+50" fill="red" stroke-width="3" stroke="maroon"/>
<clipPath id="clip-left">
<use xlink:href="#circle3" x="-50"/>
</clipPath>
<clipPath id="clip-right">
<use xlink:href="#circle3" x="+50"/>
</clipPath>
<g clip-path="url(#clip-left)">
<use xlink:href="#circle3" x="+50" fill="salmon" stroke-width="3" stroke="white"/>
</g>
<g clip-path="url(#clip-right)">
<use xlink:href="#circle3" x="-50" fill="salmon" stroke-width="3" stroke="white"/>
</g>