SVG 怎么改颜色：3 种方法（改代码 / currentColor / CSS 变量）

「SVG 改不了颜色」是最常见的误会，多数时候只是用错了引入方式。先确认一件事：图标是内联在 HTML 里，还是被 img 标签当作外部文件引用。前者能直接被页面 CSS 控制，后者不行——这是后面所有方案的分界线。

本文目录

• 方法一：直接改文件里的 fill / stroke
• 方法二：currentColor，让图标跟着文字走
• 方法三：CSS 变量 / mask，做多主题最省心
• 三个常见坑

方法一：直接改文件里的 fill / stroke

最直白的做法。用文本编辑器打开 SVG，把写死的颜色值（如 #333、black）替换成目标色。线性图标通常改 stroke，填充图标改 fill；如果图形里同时有两者，要一起改。缺点是每换一个颜色就要多存一份文件，做深色模式时容易失控。

<!-- 改前 -->
<path fill="#333333" d="..."/>
<!-- 改后 -->
<path fill="#3e7c46" d="..."/>

方法二：currentColor，让图标跟着文字走

把 fill 或 stroke 设成 currentColor，SVG 就会继承当前元素的文字颜色。按钮变灰、链接变蓝、深色模式文字变浅，图标自动跟着变，不用换图。注意：currentColor 只在内联 SVG 里可靠生效；用 <img src="icon.svg"> 引入时，外部文件是一个独立文档，取不到页面的 color。

• 把颜色统一交给父元素的 color，别在图标里再写死色值
• 再配一层 CSS：.btn:hover { color: #c0392b } 图标与文字一起变色
• 深色模式用 @media (prefers-color-scheme: dark) 改 color 即可

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg>

方法三：CSS 变量 / mask，做多主题最省心

内联 SVG 里可以直接写 fill="var(--icon-color)"，在 :root 和 [data-theme] 下各定义一份变量，切换主题只改变量。如果必须用外部文件，就把单色 SVG 当遮罩：background-color 定颜色，mask-image 定形状，这样外部文件仍能缓存，颜色也随主题走。代价是图标内部的多色层次会被抹掉。

.icon { width:24px; height:24px; background:var(--icon,#3e7c46);
  -webkit-mask:url("/icon.svg") center/contain no-repeat;
          mask:url("/icon.svg") center/contain no-repeat; }
:root { --icon:#3e7c46 } [data-theme="dark"] { --icon:#9ad0a4 }

三个常见坑

① 有些导出工具会把颜色写进 <style> 或给每个 path 单独加 fill，改根节点不生效，要先清掉；② stroke 与 fill 同时存在时只改一个会留下半截旧色；③ 用 filter: invert(1) 一键反色看似方便，彩色图标会变成怪色，只适合纯单色图标。

• 先查一遍文件里有没有写死的 #hex / rgb()
• 线性图标改 stroke，填充图标改 fill，混排时两个都改
• 彩色图标别用 filter 反色，另准备深色版更稳

常见问题

← 返回全部使用指南　·　许可与使用常见问题 →