答案是使用 fill 和 stroke 属性控制SVG颜色，通过CSS类动态改变颜色，内联SVG或mask方案确保样式生效。1. fill 设置图形填充色，stroke 设置描边色；2. 直接在CSS中定义类名修改颜色；3. 使用内联SVG或 mask 技术突破外部SVG无法控制的限制。
在CSS中控制SVG图形的显示颜色，主要通过 fill 和 stroke 属性来实现。这两个属性分别控制SVG图形的填充色和描边色。你可以直接在CSS中设置它们，从而动态改变SVG的颜色表现，而无需修改SVG源文件。
1. 使用 fill 控制填充颜色
fill 属性用于设置SVG图形内部的填充颜色，适用于 red"><circle>、<rect>、<path> 等封闭图形。
CSS 示例：
svg path {
fill: #007acc;
}
.icon-success {
fill: green;
}
如果SVG内联在HTML中，可以直接通过类名控制 fill 颜色。注意：若SVG使用 <img src="icon.svg"> 引入，则无法用CSS控制 fill，除非使用内联SVG或 background-image 方式配合 mask 技巧。
立即学习“前端免费学习笔记（深入）”；
2. 使用 stroke 控制描边颜色
stroke 属性用于设置图形轮廓的颜色，常用于线条、路径或需要描边的形状。
CSS 示例：
svg line, svg path {
stroke: red;
stroke-width: 2px;
}
可以结合 stroke-opacity、stroke-dasharray 等属性进一步美化描边效果。
3. 在CSS中动态切换颜色
通过为SVG容器添加不同类名，可以在主题切换或状态变化时动态改变颜色。
例如：
.icon-primary { fill: #007bff; }
.icon-danger { fill: #dc3545; }
.icon-warning { fill: #ffc107; stroke: #e0a800; }
HTML 中使用：
<svg class="icon-primary" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
</svg>
4. 处理外部SVG文件的限制
如果使用 <img> 标签引入SVG，由于浏览器将其视为图片，CSS无法穿透控制 fill 或 stroke。解决方法包括：
- 将SVG内联到HTML中（推荐用于小图标）
- 使用 SVG symbol + use 机制，并确保未设置内联 fill
- 利用CSS mask 属性将SVG作为遮罩，通过背景色控制颜色
mask 示例：
.icon-mask {
background: currentColor;
-webkit-mask: url(icon.svg) no-repeat center;
mask: url(icon.svg) no-repeat center;
width: 24px;
height: 24px;
}
这样可以通过设置元素的 color 属性间接控制SVG显示颜色。
基本上就这些。关键是理解 fill 和 stroke 的作用场景，以及如何让CSS能真正生效——优先使用内联SVG或mask方案。不复杂但容易忽略细节。
