I drew two superimposed circles
the code is as follows:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%"
height="100%">
<symbol id="base-circle" viewBox="-1 -1 2 2">
<title></title>
<circle r="1" cx="0" cy="0"/>
</symbol>
<symbol id="top-circle">
<title></title>
<use xlink:href="-sharpbase-circle" width="200" height="200" x="50" y="0"/>
</symbol>
<symbol id="right-circle">
<title></title>
<use xlink:href="-sharpbase-circle" width="200" height="200" x="100" y="86.6"/>
</symbol>
<g transform="translate(20 20)">
<use xlink:href="-sharptop-circle" fill="-sharpFF0000"/>
<use xlink:href="-sharpright-circle" fill="-sharp00FF00"/>
</g>
</svg>
because I will use the defined circles repeatedly, I declare it as < symbol >, which makes it easy to reuse.
next, I want to get the part where the two circles intersect and declare it as < symbol >, so I use < use > to add the relevant code:
<symbol id="intersect-top-right">
<clipPath id="clip-top-circle">
<use xlink:href="-sharptop-circle"/>
</clipPath>
<use xlink:href="-sharpright-circle" clip-path="url(-sharpclip-top-circle)"/>
</symbol>
<use xlink:href="-sharpintersect-top-right" fill="-sharpFFFF00"/>but can not get the results correctly, I would like to ask you, what is wrong with me?
it"s OK for me to use < circle > instead of < use > in < clipPath >, but I won"t be able to reuse the code.