我在svg中有以下图标,其中包含一个rect。
我需要用红色(现在是白色)。
用我目前的CSS解决方案,我无法得到想要的结果。
知道怎么修吗?
注意这个问题与其他问题不同,因为它只与rect有关,而与path无关。
.icon rect {
fill: red;
}
html {
background-color: gray;
}
<div class="icon">
<svg width="50%" height="50%" viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-28.000000, -26.000000)" stroke-width="2" stroke="#FFFFFF">
<rect x="43" y="27" width="1" height="18"></rect>
<rect x="29" y="27" width="1" height="18"></rect>
</g>
</g>
</svg>
</div>
最佳答案
您需要更改stroke
的g
值(您还指定了内联值),因为它位于rect之上:
.icon g {
stroke: rgba(0,0,0,0.5);
}
.icon rect {
fill: red;
}
html {
background-color: gray;
}
<div class="icon">
<svg width="50%" height="50%" viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-28.000000, -26.000000)" stroke-width="2" stroke="#FFFFFF">
<rect x="43" y="27" width="1" height="18"></rect>
<rect x="29" y="27" width="1" height="18"></rect>
</g>
</g>
</svg>
</div>
或者简单地从g中删除笔划:
.icon rect {
fill: red;
}
html {
background-color: gray;
}
<div class="icon">
<svg width="50%" height="50%" viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-28.000000, -26.000000)" >
<rect x="43" y="27" width="1" height="18"></rect>
<rect x="29" y="27" width="1" height="18"></rect>
</g>
</g>
</svg>
</div>