CODEWITHSUNDEEP
htmlcsssvg
Radex
Radex

Reputation: 8577

How to set fill color for svg rect

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>

Upvotes: 16

Views: 27875

Answers (1)

Temani Afif
Temani Afif

Reputation: 272608

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>

Upvotes: 8

Related Questions