答案：通过内联SVG结合CSS的fill、stroke属性及currentColor和CSS变量可实现颜色动态控制，使用symbol引用外部图标并避免行内样式覆盖是关键策略。
在网页开发中，SVG（可缩放矢量图形）因其清晰度高、体积小、可交互性强而被广泛使用。但在实际应用中，我们常常需要通过CSS动态控制SVG的颜色，比如改变图标填充色（fill）或描边颜色（stroke）。下面介绍几种常见的实现方式。
1. 直接使用CSS设置fill和stroke
如果SVG是内联写入HTML中的（即直接把SVG代码嵌入页面），可以直接用CSS控制其fill和stroke属性。例如：
HTML：
<svg class="icon" width="24" height="24" viewBox="0 0 24 24"> <path d="M12 2L2 7l10 5 10-5-10-5z"/> </svg>
CSS：
立即学习“前端免费学习笔记（深入）”；
.icon {
fill: currentColor;
stroke: #000;
stroke-width: 1;
}
这里使用 currentColor 是个好习惯，它会继承父元素的 color 值，便于与文本颜色保持一致。
2. 使用CSS变量统一管理颜色
为了更灵活地控制颜色，推荐使用CSS自定义属性（变量）。CSS：
立即学习“前端免费学习笔记（深入）”；
:root {
--icon-fill: #333;
--icon-stroke: none;
}
<p>.icon {
fill: var(--icon-fill);
stroke: var(--icon-stroke);
}
这样可以在不同主题或状态下通过JavaScript或类切换来动态修改颜色：
document.documentElement.style.setProperty('--icon-fill', 'red');
3. 外部SVG引用时的颜色控制限制
如果通过 <img src="icon.svg"> 或 background-image 引入SVG，就无法用CSS控制其内部样式了，因为这类引入方式不支持样式穿透。解决方案有：
- 改用内联SVG（直接写在HTML里）
- 使用SVG symbol + use 标签（推荐）
示例：使用symbol定义图标库
<svg style="display: none;">
<symbol id="icon-heart" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</symbol>
</svg>
<p><!-- 使用图标 -->
<svg class="icon" width="24" height="24">
<use href="#icon-heart" />
</svg>
此时仍可用CSS控制颜色：
.icon {
fill: currentColor;
stroke: currentColor;
}
4. 避免行内fill覆盖CSS
如果SVG源码中已有 fill="..." 属性，它会优先于CSS样式。要让CSS生效，需移除行内属性或用CSS强制覆盖。解决方法：
- 在SVG导出时避免固定fill值
- 手动删除 fill 属性
- 使用CSS !important（不推荐，仅应急）
更好的做法是确保SVG路径没有写死颜色：
<path d="..." /> <!-- 不设 fill -->
然后由CSS统一控制：
.icon path {
fill: currentColor;
}
基本上就这些常用技巧。关键点在于：内联SVG才能被CSS控制；用 currentColor 和 CSS 变量提升灵活性；避免行内样式干扰。只要结构合理，SVG颜色控制其实并不复杂。
