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

【问题标题】：How to apply color to only part of a SVG icon with CSS?如何使用 CSS 仅将颜色应用于 SVG 图标的一部分？
【发布时间】：2021-09-08 04:19:39
【问题描述】：

这里我有这个使用 svg 图标的字体颜色选择器图标。 When a specific color is selected, I want to change the bottom rectangle (not the A letter) to match the selected color, so I am wondering if there is a way to only render the bottom part of the svg icon with specific color?

以下是 SVG 代码：

&lt;svg class="svgIcon---svg---3eBcz" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"&gt;&lt;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"&gt;&lt;/path&gt;&lt;/svg&gt;

是否可以更改 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>

【问题讨论】：

给它一个 id 或类名。它的工作原理与 HTML 相同
嗯.. 奇怪的是它只有一条路径。 A 是图标的一部分吗？当我说给它一个 id 或类名时，我的意思是你可以这样做 <path class="redrect" d="...
如何将 SVG 合并到 HTML 文档中？这是一个内联的<svg>-in-HTML5，还是一个<img />，或者这个SVG被加载到一个CSS background-image中？
我认为您必须将路径分成两部分，以便分别为它们着色。
@Dai 这是一个内联的 svg，由 元素包裹，我刚刚用它更新了问题。

标签： javascript css svg

【解决方案1】：

如果您将 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>

【讨论】：

啊，它有效！我明白你的意思了。那么，我应该直接将这种 css 样式应用于 svg 元素吗？问题是，在现有代码中，我只能选择将 css 样式应用于 i 元素，类似于 ，这也可以吗？
难道<style> 不需要存在于<svg> 元素中吗？我不确定所有浏览器都让 HTML 范围的 <style> 应用于内部 <svg> 元素 - 不过我很想在这方面犯错。
@Dai 好主意！如果
@flyingbee 你可以通过使用 JS 在 SVG 范围内设置 CSS 自定义属性（例如 path:nth-child(2) { fill: var(--my-color); }.
@dai CSS 技巧有一篇关于可以通过 CSS 应用的表示属性的文章。 css-tricks.com/svg-properties-and-css我从来没有听说过现代浏览器不允许在路径元素上这样做，但当然可能错过了一些东西。