Question

我在svg中有以下图标，其中包含一个rect。我需要用红色（现在是白色）。使用我目前的CSS解决方案，我无法获得想要的结果。知道怎么解决吗？

注意这个问题与其他问题不同，因为它只涉及rect而不是path。

＆＃13;

.icon rect {
  fill: red;
}

html {
  background-color: gray;
}

＆＃13;

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

＆＃13;

Answer 1

您需要更改stroke g的值（您也是内联指定的值），因为它超出了矩形：

＆＃13;

.icon g {
  stroke: rgba(0,0,0,0.5);
}
.icon rect {
  fill: red;
}

html {
  background-color: gray;
}

＆＃13;

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

＆＃13;

或者只是从g：

中删除笔画

＆＃13;

.icon rect {
  fill: red;
}

html {
  background-color: gray;
}

＆＃13;

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

＆＃13;

如何设置svg rect的填充颜色

1 个答案: