SVG：use元素的描边被圆形的描边所覆盖

Question

SVG：use元素的描边被圆形的描边所覆盖

3

这里忽略了<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>

- Priya jain

1

不要为圆形使用描边。如果您需要一个带蓝色描边的圆形，将没有描边属性的圆形放在<defs>中，并使用带有蓝色描边的<use>元素。 - enxaneta

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- doğukan · Accepted Answer

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