Question

我正在使用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 id="I1" x = "50" y = "50" xlink:href = "#3WayValve" visibility="visible"/>

我希望能够修改ID =＆＃34; IN＆＃34;的填充属性。使用javascript。

我可以修改use标签中的属性，例如

document.querySelector(".InletsComponent").getSVGDocument().querySelector(".InletsComponentImage").getElementById("I1").setAttribute("visibility", "hidden");

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

提前谢谢！

Answer 1

如果您希望能够通过g元素的样式更改use对象中所有元素的填充属性，那么您应不声明填写g元素。

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

现在，如果对use对象应用填充，它们将由未定义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");

查看此更新 JSFiddle 。

Answer 2

我提出了一个有效的解决方案，但我对此并不满意。解决方案：

<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"/>

我不得不将1个组件分成4个符号，然后使用4个使用标签将其添加到页面中以创建组件。

然后我可以使用：

修改各个位

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");

有没有人知道更好的方法可以做到最小化每个组件的使用标签数量？但仍然可以修改单个位。

修改<defs> <g>中定义的SVG组件并在<use>中使用</use> </g> </defs>

2 个答案: