useによって配置されたsvg rect strokeを変更します。

Question

私はsvgスプライトで作業しています。の機能を使用して配置されたいくつかのsvgのストロークプロパティを変更しようとしています。 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

2つの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>