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

Question

两者的行程<use>元素在这里被忽略。 <circle>的笔触颜色设置为蓝色，同时出现在 <use> 上元素也。为什么？

我想要所有 3 个元素的不同条纹颜色。但它不起作用。

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

Answer 1

因为 circle仍然覆盖 <use> .

您可以考虑使用 CSS 变量来控制笔触颜色，如下所示。

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