javascript - 如何访问 <svg :use> tag from javascript? 的子项

Question

我在 XHTML 页面中有以下 SVG 代码

<svg:svg>
<svg:svg width="450" heigth="450" viewBox="0 0 500 500">  
    <svg:defs>
        <svg:g id='mygroup'>
            <svg:circle id='a' cx="15" cy="15" r='15' fill="green" fill-opacity="0.3"/>
            <svg:line id='b' x1="15" y1="15" x2="15" y2="0" style="stroke: black;" />
        </svg:g>
</svg:defs>

<svg:rect width="400" height="400" fill="white" stroke="black" />
<svg:use id="g1" xlink:href="#mygroup" x="100" y="100" onclick="moveMe()" />
<svg:use id="g2" xlink:href="#mygroup" x="100" y="200" />
</svg:svg>

我想用下面的javascript代码修改它

<script><![CDATA[
    function moveMe(){
    obj = document.getElementById("g1");
    obj.setAttributeNS(null, "x", "200"); //Ok it works

    //How can I change the color of the a circle in g1? 
    obj = document.getElementById("g1.a");
    obj.setAttributeNS(null, "fill", "red"); //It doesn't work
    }
 ]]></script>

如何更改“g1”中“a”圆圈的颜色？如何从我的 JavaScript 代码访问它？

编辑:如果我有第二个名为 g2 的 mygroup 项目，我不想更改它的颜色。

Answer 1

一个简单的解决方案是使用“currentColor”关键字传递颜色，如下所示:

<svg:svg>
<svg:svg width="450" heigth="450" viewBox="0 0 500 500">  
<svg:defs>
    <svg:g id='mygroup'>
        <svg:circle id='a' cx="15" cy="15" r='15' fill="currentColor" fill-opacity="0.3"/>
        <svg:line id='b' x1="15" y1="15" x2="15" y2="0" style="stroke: black;" />
    </svg:g>
</svg:defs>

<svg:rect width="400" height="400" fill="white" stroke="black" />
<svg:use id="g1" xlink:href="#mygroup" x="100" y="100" onclick="moveMe()" color="green"/>
<svg:use id="g2" xlink:href="#mygroup" x="100" y="200" color="blue"/>
</svg:svg>

如果您想更改颜色，现在只需更改“use”元素上的“color”属性即可。或者简单地使用 CSS 来实现，例如:

<style>
#g1:hover { color: lime }
</style>