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路径的填充颜色会被更改为绿色。这种方法能够让你有选择性地更改特定元素的样式，而不影响其他元素。

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

shell
path:hover{
  fill:red;
}

放入所有 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;
}