[英]SVG: Why can I not override the fill color?
I with to have a default fill and override where needed:我有一个默认填充并在需要的地方覆盖:
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <defs> <circle fill="blue" id="myCircle" cx="0" cy="0" r="5" /> </defs> <use class="one" x="5" y="5" href="#myCircle" /> <use class="two" x="5" y="5" href="#myCircle" fill="red" /> </svg>
However, both circles are blue.但是,两个圆圈都是蓝色的。
I also tried using CSS to set.two to fill: red, however both circles remain blue.我还尝试使用 CSS 来设置。两个填充:红色,但是两个圆圈都保持蓝色。
Why is this and can it be changed?这是为什么,可以改变吗?
fill="red"
is ignored here, because stroke was already set on #myCircle. fill="red"
在这里被忽略了,因为 stroke 已经在#myCircle 上设置了。 Most attributes (except for x, y, width and height) do not override those set in the ancestor.大多数属性(x、y、宽度和高度除外)不会覆盖祖先中设置的那些。
Basicly removing the fill
property on #myCircle
will fix the issue.基本上删除#myCircle
上的fill
属性将解决此问题。
Here are a couple of example on how you can change the fill and stroke of svg elements using css下面是几个示例,说明如何使用 css 更改 svg 元素的填充和描边
.circles { display: flex; gap: 1rem; }.super-circle { width: 100px; height: 100px; }.super-circle circle { stroke: maroon; stroke-width: 2px; }.super-circle--blue circle { fill: blue; }.super-circle--red circle { fill: red; }.super-circle--green circle { fill: green; stroke: purple; }
<div class="circles"> <svg class="super-circle super-circle--blue" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4" /> </svg> <svg class="super-circle super-circle--red" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4" /> </svg> <svg class="super-circle super-circle--green" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4" /> </svg> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.