Question

以下两个SVG标记呈现相同的内容：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path style={inputAdornmentIcon} d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path style={inputAdornmentIcon} d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
    </svg>

您知道第一个版本中的第二个路径元素（<path d="M0 0h24v24H0z" fill="none"/>）实际上是做什么的吗？

Answer 1

代码中的额外路径是覆盖所有svg画布的矩形。正如我已经评论过的那样，Google的图标始终使用这样的额外矩形作为背景，但是该矩形排在第一位。删除多余的元素并简化标记总是一个好主意。

svg文件中的冗余<path>元素

1 个答案: