How to set fill color for svg rect

Question

I have the following icon in svg, which contain a rect. I need to color in red (now they are in white). With my current CSS solution I am not able to get the result wanted. Any idea how to fix it?

Notes this question is different from other because it related to rect only and not 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>

Answer 1

You need to change stroke value of g (a value that you also specified inline) because it's going above the 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>

Or simply remove stroke from 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>