如何为svg rect设置填充颜色

Posted 2023-03-06

【中文标题】如何为svg rect设置填充颜色

【英文标题】：How to set fill color for svg rect

【发布时间】：2018-06-09 23:08:47

【问题描述】：

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

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

.icon rect 
  fill: red;


html 
  background-color: gray;

<div class="icon">
  <svg   viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g stroke="none" stroke- fill="none" fill-rule="evenodd">
      <g transform="translate(-28.000000, -26.000000)" stroke- stroke="#FFFFFF">
        <rect x="43" y="27"  ></rect>
        <rect x="29" y="27"  ></rect>
      </g>
    </g>
  </svg>
</div>

【问题讨论】：

Can I change the fill color of an svg path with CSS?的可能重复

矩形元素没有可见的填充，因为 1/2 的笔触宽度 >= 宽度，所以您看到的只是笔触和笔触颜色。

【参考方案1】：

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

.icon g 
  stroke: rgba(0,0,0,0.5);

.icon rect 
  fill: red;


html 
  background-color: gray;

<div class="icon">
  <svg   viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g stroke="none" stroke- fill="none" fill-rule="evenodd">
      <g transform="translate(-28.000000, -26.000000)" stroke- stroke="#FFFFFF">
        <rect x="43" y="27"  ></rect>
        <rect x="29" y="27"  ></rect>
      </g>
    </g>
  </svg>
</div>

或者简单地从 g 中删除笔画：

.icon rect 
  fill: red;


html 
  background-color: gray;

<div class="icon">
  <svg   viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g stroke="none" stroke- fill="none" fill-rule="evenodd">
      <g transform="translate(-28.000000, -26.000000)" >
        <rect x="43" y="27"  ></rect>
        <rect x="29" y="27"  ></rect>
      </g>
    </g>
  </svg>
</div>

【讨论】：

为什么你申请的是g stroke而不是rect？

或者他可能只是搜索了 SO 并在已经回答的问题中找到了一些相同的例子。

@Radex 因为笔划在矩形上方，请在此处阅读更多内容：w3schools.com/graphics/svg_stroking.asp

@Radex 再次检查我的答案，你会明白更多；）