如何从 javascript 访问 <svg:use> 标记的子项？答案

【问题标题】：How can I access the sub-items of a <svg:use> tag from javascript?如何从 javascript 访问 <svg:use> 标记的子项？
【发布时间】：2010-12-04 12:47:06
【问题描述】：

我在 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 项目，我不想更改它的颜色。

【问题讨论】：

我不是 svg 专家，但从外观上看，您的 JavaScript 正在操纵 DOM，这是非扩展形式，所以不，您不能更改 mygroup 并使其适用到 g1 但不是 g2。您必须创建 mygroup 的副本，并将 g1 附加到一个副本，将 g2 附加到另一个副本。然后你就可以独立操作它们了。

标签： javascript xhtml svg

【解决方案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>

【讨论】：

不错！我不知道那个。但有一件事：在您的示例中，您无法为圆圈定义默认颜色。例如。你想要所有的#a 绿色，只有点击#g1 它应该变成红色。这可能吗？
完美运行。非常感谢您提供这个优雅的解决方案
@räph：可以使用 CSS 应用默认颜色，这样所有具有特定类名的使用元素都会获得默认的“颜色”集，例如：.myInstances { color: fuchsia; /* 默认颜色 */ } 这样你只需要设置一次颜色，而不是在每个“使用”元素上。至于点击，好吧，如果状态更改是非静态的，您可以使用 :active 伪类来设置它，但在点击时分配一个额外的类名可能会更好。

【解决方案2】：

替换

obj = document.getElementById("g1.a");

与

obj = document.getElementById("a");

因为 circle 元素的 id 是 a 而不是 g1.a。

iN document.getElementById(id)

id is a case-sensitive string representing the unique ID of the element 
being sought.

【讨论】：

感谢这个答案。这在原始示例中有效，但请参阅我的编辑。
我认为你只是在 g1 的点击上调用 moveme 函数。那么g2的问题是什么。
其实问题是g1和g2上颜色在变化。我只想为 g1 更改它。这可能吗？
你在 g1 和 g2 上都调用这个函数吗？
不仅在 g1 上。我想要做的是改变g1中圆圈的颜色而不修改g2中的圆圈。

【解决方案3】：

您可以通过使用 css 来实现所需的行为。

将此添加到您的 html-head：

<style type="text/css">
   .g1red #a {fill:red}
</style>

使用此脚本代码：

<script><![CDATA[
function moveMe(){
obj = document.getElementById("g1");
obj.setAttributeNS(null, "x", "200");
obj.setAttributeNS(null, "class", "g1red");  
}
]]></script>

【讨论】：