请问SVG的clipPath中，如何复用已定义的<symbol>?

Question

我绘制了叠加的两个圆

代码如下：

<?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="#base-circle" width="200" height="200" x="50" y="0"/>
    </symbol>

    <symbol id="right-circle">
        <title>右边的圆形</title>
        <use xlink:href="#base-circle" width="200" height="200" x="100" y="86.6"/>
    </symbol>

    <g transform="translate(20 20)">
        <use xlink:href="#top-circle" fill="#FF0000"/>
        <use xlink:href="#right-circle" fill="#00FF00"/>
    </g>

</svg>

由于我将会反复的使用所定义的这几个圆，所以我声明为<symbol>，这样方便重用。

接下来，我希望得到这两个圆相交的部分，并声明为<symbol>，于是我利用<use>添加了相关的代码：

    <symbol id="intersect-top-right">
        <clipPath id="clip-top-circle">
            <use xlink:href="#top-circle"/>
        </clipPath>
        <use xlink:href="#right-circle" clip-path="url(#clip-top-circle)"/>
    </symbol>
    
    <use xlink:href="#intersect-top-right" fill="#FFFF00"/>

但是却不能正确的得到结果，请教各位，我是哪里出了问题？

如果我在<clipPath>中不使用<use>而直接使用<circle>是可以的，但是这样就不能重用代码了。