如何使用 CSS 仅将颜色应用于 SVG 图标的一部分？

飞蜂

在这里，我有一个使用 svg 图标的字体颜色选择器图标。选择特定颜色时，我想更改底部矩形（而不是 A 字母）以匹配所选颜色，所以我想知道是否有办法仅使用特定颜色渲染 svg 图标的底部？

下面是SVG代码：

<svg class="svgIcon---svg---3eBcz" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 1c.2 0 .38.12.46.3l3 7a.5.5 0 01-.92.4L9.81 7H6.2l-.73 1.7a.5.5 0 11-.92-.4l3-7A.5.5 0 018 1zM6.62 6h2.76L8 2.77 6.62 6zM2 11.5c0-.83.67-1.5 1.5-1.5h9c.83 0 1.5.67 1.5 1.5v2c0 .83-.67 1.5-1.5 1.5h-9A1.5 1.5 0 012 13.5v-2z"></path></svg>

是否可以更改 svg 路径中的一些数字或添加特定的填充规则，以便只有底部可以填充颜色，或者，是否有另一种方法可以仅通过 CSS 更改来实现？

以下是外部 HTML 文档的外观。我只能选择修改i（图标）元素上的 css 样式。

<i data-icon-name="TextColorFilled" aria-hidden="true" class="Button-icon icon-518"><span role="presentation" aria-hidden="true" class="svgIcon---root---V-j2a" style="vertical-align: top; height: 100%; width: 100%;">
<svg class="svgIcon---svg---3eBcz" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1c.2 0 .38.12.46.3l3 7a.5.5 0 01-.92.4L9.81 7H6.2l-.73 1.7a.5.5 0 11-.92-.4l3-7A.5.5 0 018 1zM6.62 6h2.76L8 2.77 6.62 6zM2 11.5c0-.83.67-1.5 1.5-1.5h9c.83 0 1.5.67 1.5 1.5v2c0 .83-.67 1.5-1.5 1.5h-9A1.5 1.5 0 012 13.5v-2z"></path>
</svg>
</span>
</i>

霍沃思

如果将 svg 分成两条路径，则可以选择第二条路径并使用填充和 CSS 为其着色。

<style>
path:nth-child(2) {
  fill: red;
}
</style>
<svg class="svgIcon---svg---3eBcz" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 1c.2 0 .38.12.46.3l3 7a.5.5 0 01-.92.4L9.81 7H6.2l-.73 1.7a.5.5 0 11-.92-.4l3-7A.5.5 0 018 1zM6.62 6h2.76L8 2.77 6.62 6z"></path>
<path d="M2 11.5c0-.83.67-1.5 1.5-1.5h9c.83 0 1.5.67 1.5 1.5v2c0 .83-.67 1.5-1.5 1.5h-9A1.5 1.5 0 012 13.5v-2z"></path></svg>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。