SVG颜色需用CSS的fill属性控制，因SVG元素如默认通过fill上色而非color；内联SVG可直接用CSS设置fill改变颜色，推荐将fill应用于svg标签使子元素继承；若使用引入外部SVG则无法用CSS修改颜色，解决方案包括改用内联SVG、使用CSS滤镜或预生成多色文件；可通过fill: currentColor结合color属性实现颜色跟随文本颜色切换，便于主题统一。
SVG元素的颜色无法通过常规的color属性来修改，必须使用CSS的fill属性来控制其填充颜色。这是因为SVG图形（如fill属性上色的，而不是继承文本颜色。
使用 fill 属性设置 SVG 颜色
直接在CSS中为SVG或其内部元素设置fill即可改变颜色：
svg {
fill: #007acc;
}
如果SVG内包含多个路径，建议将fill应用到最外层的svg标签，子元素会自动继承。
处理内联 SVG 和外部 SVG 的差异
如果是内联SVG（直接写在HTML中的SVG代码），可以直接用CSS控制fill。
立即学习“前端免费学习笔记（深入）”；
但如果是通过
- 改用内联SVG：将SVG代码直接嵌入HTML
- 使用
mask或filter：通过CSS滤镜改变颜色（适合简单单色图标） - 预生成不同颜色的SVG文件
动态切换颜色的实用技巧
可以结合CSS类实现颜色切换：
.icon { fill: currentColor; }
.icon--primary { color: blue; }
.icon--danger { color: red; }
设置fill: currentColor可以让SVG颜色跟随文本颜色，便于统一主题配色。
基本上就这些。只要确保使用fill而非color，并避免在img标签中使用需变色的SVG，就能灵活控制SVG颜色。
