如何为 svg rect 设置填充颜色

Question

我在 svg 中有以下图标，其中包含一个矩形。 我需要涂成红色（现在它们是白色的）。 使用我当前的 CSS 解决方案，我无法获得想要的结果。 知道如何修复它吗？

注意这个问题与其他问题不同，因为它只与 rect 而不是路径有关。

 .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>

Answer 1

您需要更改g stroke值（您也内联指定的值），因为它位于矩形上方：

 .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 中删除stroke：

 .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>