javascript - 更改使用时放置的 svg 矩形描边

Question

我正在使用 svg Sprite ，我正在尝试更改通过使用 功能放置的某些 svg 中的笔划属性。它将 ShadowRoot 的扩展 svg 放入 DOM 中，看起来它被外部 css 规则锁定了。

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

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