在前端开发中，SVG因为缩放不失真且体积小，常被用来做图标和简单插画。很多新手以为用CSS的color属性就能改掉SVG的颜色，结果页面上图形完全没变化。其实SVG有自己的绘制属性，控制填充和描边的主要是fill与stroke，而不是普通的文本颜色。要让CSS真正改变SVG显示色彩，必须针对这些属性下手，并且根据SVG的引入方式选择不同手段。
一、直接通过CSS设置fill和stroke
当SVG是以内联方式写在HTML里时，它就是文档树的一部分，CSS选择器可以直接命中内部的图形元素。此时最简单的方法就是给path、circle等标签设置fill属性。例如下面这段内联SVG，我们用类选择器把路径填充改成红色。
<svg width="100" height="100" viewBox="0 0 100 100">
<path class="icon-path" d="M10 10 H90 V90 H10 Z" />
</svg>
<style>
.icon-path {
fill: #e74c3c;
stroke: #333;
stroke-width: 2;
}
</style>这种写法的好处是直观、可控，你能精确改变某一个图形的颜色，也方便做 hover 交互。比如鼠标移上去换色，只需要加一条.icon-path:hover { fill: #3498db; }即可。
不过它也有局限：如果项目里SVG很多，每个都要写一遍选择器会比较繁琐；而且当SVG是由第三方组件动态插入时，你可能需要提高选择器权重，或者用深度选择器才能覆盖原有样式。在Vue或React里使用 scoped 样式时，也要留意样式穿透问题。
二、使用currentColor继承文字颜色
currentColor是CSS中的一个特殊关键字，它表示元素当前computed的color值。把SVG的fill设为currentColor后，图形颜色就会跟着所在容器的文字颜色走。这种做法在图标组件里非常流行，因为父级改color，图标自动跟着变。
<span class="text-blue">
<svg width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 2 L2 22 L22 22 Z" />
</svg>
三角形
</span>
<style>
.text-blue { color: #2980b9; }
</style>上面的代码中，path的fill绑定了currentColor，而外层span设置了color，于是三角形和文字都显示同样的蓝色。如果后面把color改成绿色，不用动SVG本身。
该方式的优势是复用性强，特别适合封装通用图标库。缺点是所有颜色都依赖color，无法在一个SVG里让不同部分显示多种颜色，除非配合CSS变量使用。另外在部分旧版IE中currentColor支持不完整，但现代浏览器已基本无碍。
三、借助CSS变量动态换色
CSS自定义属性（变量）可以让换色逻辑更灵活。我们定义像--svg-fill这样的变量，在SVG内部通过var()引用，外部只需改变量就能整体调色，甚至做暗黑模式切换。
<style>
:root {
--svg-fill: #2ecc71;
}
.dark-mode {
--svg-fill: #f1c40f;
}
</style>
<svg width="50" height="50" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" style="fill: var(--svg-fill);" />
</svg>这里circle的fill用了style里的var函数读取--svg-fill。当我们给body加上dark-mode类，变量值变化，圆形颜色随之改变。用JS切换类名就能实现主题切换。
相比写死颜色，变量方案更易于维护。如果SVG是内联的，这种方式几乎零成本；但若SVG是以img标签外部引入，则CSS变量无法跨文档传递，此时就要考虑把SVG内联化，或用其他手段。
四、外部SVG与img引入的限制
不少项目为了缓存和简洁，会把SVG存成单独文件并用img标签引入：<img src="icon.svg">。这种情况下，SVG处于独立文档，主页面的CSS选择器和变量都进不去，无法直接改色。
<img src="https://ipipp.com/icon.svg" alt="外部图标" class="ext-icon" />
<style>
.ext-icon {
/* 以下规则对img里的svg无效 */
fill: red;
}
</style>上面这种写法不会让图标变红。解决思路有几个：一是用CSS滤镜filter做近似变色，比如filter: brightness(0) saturate(100%) invert(27%)能把图标压成某色，但不够精确；二是通过JS fetch SVG内容再内联插入页面；三是服务端根据参数返回不同颜色的SVG。
如果业务对颜色准确度要求高，又想保留外部文件结构，推荐用AJAX把SVG拉回来转成内联节点，这样既能用上前面说的所有CSS技巧，也不影响原有资源拆分。只是在跨域场景下要注意对方服务器允许读取。
五、总结与选型建议
改变SVG颜色并不是难事，核心在于弄清SVG的引入形态与fill、stroke机制。内联SVG配合直接选择器、currentColor或CSS变量，能覆盖绝大多数交互与主题需求；img外部引用则受文档隔离限制，需要绕路处理。
实际开发中，图标系统建议统一内联并采用currentColor，减少样式耦合；插画类大SVG可用CSS变量做局部换色。避开“设color就生效”的误区，按场景选方法，才能写出易维护的前端界面。