更改通过使用放置的svg rect笔划

Question

我正在使用svg精灵，正在尝试更改按使用功能放置的某些svg中的stroke属性。 它将ShadowRoot扩展的svg放入DOM中，看起来像是从外部CSS规则中锁定的一样。

但是我已经看到在样式中使用可能的解决方案，但是它不起作用。 请问有人可以帮助我吗？ 有可能做到吗？

<svg style="display:none;">
  <symbol id="test">
      <rect x="10" y="10" width="100" height="100" stroke="green"/> 
  </symbol>
</svg>

<svg id="some" class="icon"><use xlink:href="#test" /></svg>

#some use rect {
 stroke: red !important;
}

Answer 1

您有两个相同的ID，需要从符号中删除笔划并应用于use类。

 #test { fill: none; } .red { stroke: red; } .green { stroke: green; } 

 <svg style="display:none;"> <symbol id="test"> <rect x="10" y="10" width="100" height="100"/> </symbol> </svg> <svg class="icon"><use xlink:href="#test" class="red"/></svg> <svg class="icon"><use xlink:href="#test" class="green"/></svg>