SVG和与javascript/jQuery的交叉引用

想象一下这种情况：

<svg height="0px">
    <defs>
        <g id="img">
            <circle id="cir1" cx="10" cy="10" r="5"/>
            <circle id="cir2" cx="30" cy="10" r="5" />
            <rect id="rect1" x="50" y="5" width="20" height="10" />
        </g>
    </defs>
</svg>
<div id="div1">
    <div id="div2" style="width:100px; height: 50px; border: 1px solid black">
        hey
    </div>
</div>
<svg height="20px"><use id="img1" xlink:href="#img"/></svg>
<svg height="20px"><use id="img2" xlink:href="#img"/></svg>
<svg height="20px"><use id="img3" xlink:href="#img"/></svg>
<svg height="20px">
    <circle id="cir5" cx="10" cy="10" r="5"/>
</svg>

我试过了，但没用。

---

如果有帮助的话，这里有小提琴：

那是不可能的。在这里，可以将绘制视为引用项。如果更改引用项，则所有实例都将更改

SVG规范的作者已经注意到，人们经常想做这类事情，而且有一种可能成为SVG2的一部分。参数化方案中的示例是使用javascript创建的，因此，如果您复制该机制，现在就可以这样做

$("#img1 #cir1").css("fill","red");