fill和stroke是控制SVG颜色的关键属性，fill负责图形内部填充，stroke定义轮廓颜色与样式，二者结合CSS可实现动态变色、主题切换及交互效果，提升图标灵活性与可维护性。
在使用 SVG 时，fill 和 stroke 是控制图形颜色最关键的两个 CSS 属性。它们分别负责图形的内部填充色和轮廓描边色。通过 CSS 可以灵活地为内联 SVG 或 SVG 图标设置颜色，尤其在响应交互或主题切换时非常实用。
fill：设置图形填充颜色
fill 属性用于定义 SVG 图形内部的颜色。适用于
示例：
此时圆形会被填充为蓝色。如果未设置 fill，默认是黑色。也可以设为 none 来取消填充：
立即学习“前端免费学习笔记（深入）”；
.my-circle {
fill: none;
}
stroke：设置描边颜色和宽度
stroke 控制图形轮廓的颜色。单独设置颜色还不够，通常还需指定描边宽度 stroke-width 才能看见效果。
常用属性包括：
- stroke：描边颜色
- stroke-width：描边粗细（单位可为 px、em 等）
- stroke-linecap：线条端点样式（如 round、butt）
- stroke-dasharray：虚线样式
示例：
这会画出一条红色虚线。
在 CSS 中动态控制 SVG 颜色
将 fill 和 stroke 写在 CSS 中，可以方便地通过类名、伪类或主题变量更改颜色。
比如实现鼠标悬停变色：
.icon-path {
fill: currentColor;
transition: fill 0.3s ease;
}
.icon-path:hover {
fill: orange;
}
这里使用 currentColor 是一个技巧——它会继承父元素的 color 值，适合做图标颜色统一管理。
例如：
此时 fill: currentColor 会让 SVG 跟随文字颜色变为绿色。
注意事项
有些情况下 CSS 无法覆盖行内属性。如果 SVG 元素本身设置了 fill="black" 这样的内联属性，CSS 的 fill 可能无效。解决方法：
- 移除 SVG 中的内联 fill/stroke 属性
- 使用更高级的选择器或加 !important（不推荐长期使用）
- 在构建流程中处理 SVG，输出适合 CSS 控制的版本
基本上就这些。掌握 fill 和 stroke 的用法，就能自由控制 SVG 的视觉表现，配合 CSS 变量还能轻松实现暗黑模式切换等需求。
