内联 SVG 是 fill 和 stroke 生效的前提，只有将 SVG 代码直接嵌入 HTML 才能通过 CSS 控制子元素样式；fill="currentColor" 可使图标颜色随父级文字色同步，但需父元素设 color 且清除内联 fill/stroke 属性。
内联 SVG 是 fill 和 stroke 生效的前提
用 <img src="icon.svg" alt="如何利用CSS控制Svg图标的颜色和填充属性？" > 引入的 SVG，fill、stroke 一律无效——浏览器把它当图片处理，内部结构完全不可见。只有把 SVG 代码直接贴进 HTML（即内联），CSS 才能选中 <path></path>、<circle></circle> 等子元素并控制样式。
常见错误现象：.icon path { fill: red; } 写了但没反应，90% 是因为用了 <img alt="如何利用CSS控制Svg图标的颜色和填充属性？" > 或 <use></use> 引用外部文件。必须确认 DOM 中真实存在 <svg><path></path></svg> 这样的嵌套结构。
- ✅ 正确：复制 SVG 源码粘贴到 HTML 中
- ✅ 可选：用
<object></object>或<iframe></iframe>加载，但有跨域和交互限制 - ❌ 避免：
<img alt="如何利用CSS控制Svg图标的颜色和填充属性？" >、<picture></picture>、CSSbackground-image
fill="currentColor" 比 fill="red" 更实用
currentColor 不是语法糖，它是让图标颜色随父级文字色自动同步的关键。但它不会“自动生效”，需要三处配合：父容器有明确 color 值、SVG 根元素或子元素设 fill="currentColor"、且不能被内联 fill="#000" 覆盖。
最稳妥写法是直接在 <svg></svg> 标签上写 fill="currentColor"，这样会透传给所有子图形（除非子元素自己写了 fill）：
立即学习“前端免费学习笔记（深入）”；
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8z"/> </svg>
- 父元素只需
color: #28a745;，图标立刻变绿 - hover 状态写
.icon:hover { color: #dc3545; }即可 - IE 不支持
fill="currentColor"，Edge 12+ 开始支持；需兼容 IE 时改用 JS 注入或预设类名
内联属性优先级高于 CSS，必须手动清理
从 Figma、Illustrator 或在线图标库下载的 SVG，常带 fill="#333"、stroke="black" 这类内联属性。它们的 CSS 优先级比外部样式表高，导致你写的 fill: currentColor 完全不生效。
解决办法不是加 !important，而是删掉或重置：
- 逐个检查并删除所有
<path></path>、<circle></circle>、<rect></rect>上的fill和stroke属性 - 保留
viewBox、d、width、height等结构属性 - 导出时勾选 “清除颜色属性”，或用正则批量替换
fill="[^"]*"为空
若某部分必须固定颜色（如品牌红圆点），给对应 <path></path> 加 class：<path class="brand-fill" d="..."></path>，再单独写 .brand-fill { fill: #e53935; }。
stroke 和 stroke-width 必须同时设置才可见
stroke 单独写 stroke: red; 很可能看不到效果，因为默认 stroke-width 是 1，单位缺失时浏览器按像素解析，但在高 DPI 屏幕下容易模糊或不可见。
描边要可靠显示，至少配齐三项：
-
stroke: currentColor;或具体颜色值 -
stroke-width: 2;（推荐带单位，如2px或2，后者是无单位数值，等价于 px） -
stroke-linecap: round;或stroke-linejoin: round;改善端点和拐角视觉
如果 SVG 原本没有描边，只改 stroke 不会凭空出现线条；必须确保路径本身有描边需求（比如 <line></line> 或设置了 stroke 的 <path></path>）。stroke-dasharray 控制虚线模式，是做路径动画的基础，但和颜色控制无关，别混用。
