<use> - SVG: Stroke of Circle overriding stroke of use element

user_6076863 0
Viewed 160

Stroke of both <use> element ignored here. The stroke color of <circle> is set blue which is appearing on both <use> element too. Why?

I want different strock color of all of 3 these element. but it is not working.

<svg width="300" class="svg-elem" viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">  
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
   
  <use class="circle1" href="#myCircle" x="10" stroke="grey" fill="blue"/>
   
  <use href="#myCircle" x="20" fill="white" stroke="red"/>
</svg>
svg css html javascript
1 Answers

Because circle still overriding the <use>.

enter image description here

You can consider using CSS variable to control stroke color like below.

<svg width="300" class="svg-elem" viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">  
  <circle id="myCircle" cx="5" cy="5" r="4" style="stroke:var(--stroke, blue)"/>
   
  <use class="circle1" href="#myCircle" x="10" style="--stroke:gray;" fill="blue"/>
   
  <use href="#myCircle" x="20" fill="white" style="--stroke:red;"/>
</svg>

user_106987410
Related