CSS 如何更改 svg 路径的填充颜色？

在CSS中更改SVG路径的填充颜色通常是通过使用fill属性来实现的。首先，你需要确保你的SVG图像是以内联的形式嵌入在HTML中的，因为对于外部引用的SVG文件，CSS可能无法直接影响其样式。

下面是一个简单的例子，演示了如何使用CSS来更改SVG路径的填充颜色：

假设你有以下的SVG代码嵌入在HTML中：

html
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 h 80 v 80 h -80 Z" />
</svg>

在这个SVG中，我们有一个<path>元素，它绘制了一个简单的正方形路径。默认情况下，这个路径没有填充颜色。

现在，我们来添加一些CSS来更改这个路径的填充颜色：

css
svg path {
  fill: #ff0000; /* 设置填充颜色为红色 */
}

将这个CSS规则添加到你的样式表中，或者放在<style>标签内直接嵌入在HTML中，它会将所有SVG内的<path>元素的填充颜色更改为红色。

这个例子展示了一个更改所有SVG路径颜色的通用方法，但你也可以更具体地指定你想要更改颜色的SVG路径，比如使用类名：

HTML:

html
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <path class="my-path" d="M10 10 h 80 v 80 h -80 Z" />
</svg>

CSS:

css
svg .my-path {
  fill: #00ff00; /* 设置特定类名的路径填充颜色为绿色 */
}

在这个例子中，只有类名为my-path的SVG路径的填充颜色会被更改为绿色。这种方法能够让你有选择性地更改特定元素的样式，而不影响其他元素。

是的，您可以将 CSS 应用于 SVG，但您需要匹配元素，就像设置 HTML 样式一样。如果您只想将其应用于所有 SVG 路径，您可以使用，例如：

shell
​path {
  fill: blue;
}​

外部 CSS 似乎会覆盖路径的fill属性，至少在我测试的基于 WebKit 和 Gecko 的浏览器中是这样。当然，如果你这样写，那么<path style="fill: green">它也会覆盖外部 CSS。

如果您想通过将鼠标悬停在元素中来更改颜色，请尝试以下操作：

shell
path:hover{
  fill:red;
}

2021 年 4 月编辑

如果您进入 SVG 文件的源代码，您可以通过修改填充属性来更改颜色填充。

shell
<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg> 

使用您最喜欢的文本编辑器，打开 SVG 文件并使用它。

我想出了另一种从 SVG 外部更改颜色的方法，那就是导入 SVG 内容并删除声明填充的样式规则。然后从 CSS 样式表中控制填充。

shell
    <svg width="100%" height="100%" viewBox="0 0 167 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="Pic_icon"><path id="Pic_icon1" serif:id="Pic_icon" d="M166.667,0l-166.667,0l0,133.333l166.667,0l-0,-133.333Zm-158.276,70.89l32.771,-33.148l48.814,49.375l31.519,-19.575l36.781,32.176l-0,-91.3l-149.885,0l-0,62.472Zm84.426,-36.017c11.25,0 20.384,9.164 20.384,20.451c0,11.287 -9.134,20.451 -20.384,20.451c-11.25,0 -20.384,-9.164 -20.384,-20.451c0,-11.287 9.134,-20.451 20.384,-20.451Z" <!-- remove this -> style="fill:#08e1ea;" -->/></g></svg>

然后在我的 CSS 文件中我进行以下操作：

shell
    svg{ fill: green; }

现在，您正在从 SVG 中删除更高层次结构的填充声明，外部的声明将获得控制。

这对我来说完全没有问题。

放入所有 svg：

shell
fill="var(--svgcolor)"

---

在 CSS 中：

shell
:root {
  --svgcolor: tomato;
}

使用伪类：

shell
span.github:hover {
  --svgcolor:aquamarine;
}

---

解释

根= html 页面。
--svgcolor = 变量。
span.github = 选择一个带有 github 类的 span 元素，内部有一个 svg 图标并分配伪类悬停。

你把这个 css 放在 svg 圆圈中。

shell
svg:hover circle{
    fill: #F6831D;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 2;
}