<use> - SVG：圆的行程覆盖使用元素的行程</use>

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>