Javascript 修改a<；中定义的SVG组件；defs>&书信电报；g>；并用于<；使用>；

我正在使用SVG，我有一个组件想要重用。e、 g:

<defs>
<g id="3WayValve">
  <line x1="33" y1="20" x2="33" y2="25" stroke = "black"></line>
  <line x1="33" y1="42" x2="33" y2="47" stroke = "black"></line>
  <line x1="43" y1="33" x2="48" y2="33" stroke = "black"></line>
  <polygon id="In" points="25,23 33,33 40,23" stroke="black" fill="green"></polygon>
  <polygon id="Out" points="25,42 33,33 40,42" stroke="black" fill="white"></polygon>
  <polygon id="Bypass" points="43,25 33,33 43,41" stroke="black" fill="green"></polygon>
  <polygon id="Alert" points="20,20 48,20 48,45 20,45" stroke="black" stroke-width="2" fill="none"></polygon>
</g>

但是如何以相同的方式访问内部组件

---

提前谢谢你

如果您希望能够通过

use

元素的样式设置来更改

g

对象中所有元素的填充属性，那么您应该不在

g

元素中声明填充

<defs>
    <g id="3WayValve">
        <polygon id="In" points="25,23 33,33 40,23" stroke="black"></polygon>
    ...

您可以分别更改每种颜色：

document.getElementById("I1").setAttribute("fill", "red");
document.getElementById("I2").setAttribute("fill", "green");

---

查看此更新的

我想出了一个可行的解决方案，但我对它不太满意。解决方案：

<svg>
<defs>
    <symbol id="3WayValveIn">
      <line x1="33" y1="20" x2="33" y2="25" stroke = "black"></line>
      <line x1="33" y1="42" x2="33" y2="47" stroke = "black"></line>
      <line x1="43" y1="33" x2="48" y2="33" stroke = "black"></line>
      <polygon id="In" points="25,23 33,33 40,23" stroke="black"></polygon>
    </symbol>

    <symbol id="3WayValveOut">
      <polygon id="Out" points="25,42 33,33 40,42" stroke="black"></polygon>
    </symbol>

    <symbol id="3WayValveBypass">
      <polygon id="Bypass" points="43,25 33,33 43,41" stroke="black"></polygon>
    </symbol>

    <symbol id="3WayValveAlert">
      <polygon id="Alert" points="20,20 48,20 48,45 20,45" stroke="black" stroke-width="2" fill="none"></polygon>
    </symbol>        
</defs>

<use  id="I1IN" x = "50" y = "50" xlink:href = "#3WayValveIn" visibility="visible"/>
<use  id="I1OUT" x = "50" y = "50" xlink:href = "#3WayValveOut" visibility="visible"/>
<use  id="I1BYPASS" x = "50" y = "50" xlink:href = "#3WayValveBypass" visibility="visible"/>
<use  id="I1ALERT" x = "50" y = "50" xlink:href = "#3WayValveAlert" visibility="visible"/>

<use  id="I2IN" x = "100" y = "50" xlink:href = "#3WayValveIn" visibility="visible"/>
<use  id="I2OUT" x = "100" y = "50" xlink:href = "#3WayValveOut" visibility="visible"/>
<use  id="I2BYPASS" x = "100" y = "50" xlink:href = "#3WayValveBypass" visibility="visible"/>
<use  id="I2ALERT" x = "100" y = "50" xlink:href = "#3WayValveAlert" visibility="visible"/>

---

是否有人知道一种更好的方法来减少每个组件的使用标签数量？但是仍然能够修改独立位。

如果我有两个ID=“I1”和ID=“I2”的use标记，会发生什么情况？如何仅更改I1填充属性？使用

元素的填充属性与
多边形的
填充
属性不同。有些多边形是白色的。如果需要，可以按ID定位
使用
元素（而不使用单个多边形的ID）。您可以找到它的
href
元素，以发现它引用的
g
元素的ID，然后从中找到要更改的多边形。例如，这将获得引用的ID:
var g1id=document.getElementById（“I1”）.getAttribute（“xlink:href”）.substring（1）
。您可以使用它来获取
g
对象：
varg1=document.getElementById（g1id）
。然后您可以获取
g
的内容并更改其属性：
g1.getElementsByTagName（“polygon”）[0].setAttribute（“fill”，“red”）
您好，谢谢您的回复。不幸的是，这不是我想要的。我希望能够在屏幕上显示组件的多个实例，例如多个使用标签。但我希望能够更改单个组件的fill属性，例如引用我的原始代码。ID1.IN.FILL=绿色，ID2.IN.FILL=红色。希望这更有意义。我知道你想要什么。我更新了答案。
<use id="I1" x="50" y="50"   xlink:href = "#3WayValve" visibility="visible"/>
<use id="I2" x="100" y="100" xlink:href = "#3WayValve" visibility="visible"/>

document.getElementById("I1").setAttribute("fill", "red");
document.getElementById("I2").setAttribute("fill", "green");

<svg>
<defs>
    <symbol id="3WayValveIn">
      <line x1="33" y1="20" x2="33" y2="25" stroke = "black"></line>
      <line x1="33" y1="42" x2="33" y2="47" stroke = "black"></line>
      <line x1="43" y1="33" x2="48" y2="33" stroke = "black"></line>
      <polygon id="In" points="25,23 33,33 40,23" stroke="black"></polygon>
    </symbol>

    <symbol id="3WayValveOut">
      <polygon id="Out" points="25,42 33,33 40,42" stroke="black"></polygon>
    </symbol>

    <symbol id="3WayValveBypass">
      <polygon id="Bypass" points="43,25 33,33 43,41" stroke="black"></polygon>
    </symbol>

    <symbol id="3WayValveAlert">
      <polygon id="Alert" points="20,20 48,20 48,45 20,45" stroke="black" stroke-width="2" fill="none"></polygon>
    </symbol>        
</defs>

<use  id="I1IN" x = "50" y = "50" xlink:href = "#3WayValveIn" visibility="visible"/>
<use  id="I1OUT" x = "50" y = "50" xlink:href = "#3WayValveOut" visibility="visible"/>
<use  id="I1BYPASS" x = "50" y = "50" xlink:href = "#3WayValveBypass" visibility="visible"/>
<use  id="I1ALERT" x = "50" y = "50" xlink:href = "#3WayValveAlert" visibility="visible"/>

<use  id="I2IN" x = "100" y = "50" xlink:href = "#3WayValveIn" visibility="visible"/>
<use  id="I2OUT" x = "100" y = "50" xlink:href = "#3WayValveOut" visibility="visible"/>
<use  id="I2BYPASS" x = "100" y = "50" xlink:href = "#3WayValveBypass" visibility="visible"/>
<use  id="I2ALERT" x = "100" y = "50" xlink:href = "#3WayValveAlert" visibility="visible"/>

document.getElementById("I1IN").setAttribute("fill", "white");
document.getElementById("I1OUT").setAttribute("fill", "green");
document.getElementById("I1BYPASS").setAttribute("fill", "green");

document.getElementById("I2IN").setAttribute("fill", "green");
document.getElementById("I2OUT").setAttribute("fill", "white");
document.getElementById("I2BYPASS").setAttribute("fill", "green");