CSS控制SVG颜色技巧

想要灵活掌控SVG图形的颜色吗？本文将深入探讨如何利用CSS的`fill`和`stroke`属性来控制SVG的填充与描边颜色，实现动态变色、主题切换以及丰富的交互效果，显著提升图标的灵活性与可维护性。`fill`属性用于定义SVG图形的内部填充色，适用于圆形、矩形、路径等封闭图形；而`stroke`属性则负责设置图形轮廓的颜色和样式，包括颜色、粗细、线条端点样式以及虚线样式等。通过CSS控制，您可以轻松实现鼠标悬停变色等动态效果，并利用`currentColor`继承父元素颜色，统一管理图标颜色。掌握`fill`和`stroke`，让您的SVG图形更具表现力！

fill和stroke是控制SVG颜色的关键属性，fill负责图形内部填充，stroke定义轮廓颜色与样式，二者结合CSS可实现动态变色、主题切换及交互效果，提升图标灵活性与可维护性。

在使用 SVG 时，fill 和 stroke 是控制图形颜色最关键的两个 CSS 属性。它们分别负责图形的内部填充色和轮廓描边色。通过 CSS 可以灵活地为内联 SVG 或 SVG 图标设置颜色，尤其在响应交互或主题切换时非常实用。

fill：设置图形填充颜色

fill 属性用于定义 SVG 图形内部的颜色。适用于 、、 等封闭图形。

示例：

<svg width="50" height="50">
  <circle cx="25" cy="25" r="20" class="my-circle" />
</svg>

<style>
.my-circle {
  fill: blue;
}
</style>

此时圆形会被填充为蓝色。如果未设置 fill，默认是黑色。也可以设为 none 来取消填充：

.my-circle {
  fill: none;
}

stroke：设置描边颜色和宽度

stroke 控制图形轮廓的颜色。单独设置颜色还不够，通常还需指定描边宽度 stroke-width 才能看见效果。

常用属性包括：

• stroke：描边颜色
• stroke-width：描边粗细（单位可为 px、em 等）
• stroke-linecap：线条端点样式（如 round、butt）
• stroke-dasharray：虚线样式

示例：

<svg width="100" height="50">
  <line x1="10" y1="25" x2="90" y2="25" class="dashed-line" />
</svg>

<style>
.dashed-line {
  stroke: red;
  stroke-width: 2px;
  stroke-dasharray: 5, 5;
}
</style>

这会画出一条红色虚线。

在 CSS 中动态控制 SVG 颜色

将 fill 和 stroke 写在 CSS 中，可以方便地通过类名、伪类或主题变量更改颜色。

比如实现鼠标悬停变色：

.icon-path {
  fill: currentColor;
  transition: fill 0.3s ease;
}

.icon-path:hover {
  fill: orange;
}

这里使用 currentColor 是一个技巧——它会继承父元素的 color 值，适合做图标颜色统一管理。

例如：

<span style="color: green;">
  <svg width="24" height="24">
    <path class="icon-path" d="..." />
  </svg>
</span>

此时 fill: currentColor 会让 SVG 跟随文字颜色变为绿色。

注意事项

有些情况下 CSS 无法覆盖行内属性。如果 SVG 元素本身设置了 fill="black" 这样的内联属性，CSS 的 fill 可能无效。解决方法：

• 移除 SVG 中的内联 fill/stroke 属性
• 使用更高级的选择器或加 !important（不推荐长期使用）
• 在构建流程中处理 SVG，输出适合 CSS 控制的版本

基本上就这些。掌握 fill 和 stroke 的用法，就能自由控制 SVG 的视觉表现，配合 CSS 变量还能轻松实现暗黑模式切换等需求。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~