Изменить SVG прямоугольный ход, который был размещен при использовании

Question

Я работаю со svg-спрайтами и пытаюсь изменить свойство stroke в некоторых svg, которые были размещены с помощью функции use. Он помещает расширенный svg от ShadowRoot в 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

У вас есть два идентичных идентификатора, и вам нужно удалить штрих из символа и применить к 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>