两者的行程<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>
最佳答案
因为 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>关于javascript - <使用> - SVG : Stroke of Circle overriding stroke of use element，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63467183/