SVG内联后fill不生效需检查继承链和currentColor；必须设fill="currentColor"并确保父容器有color样式，同时保留viewBox以保证等比缩放，暗色模式需用媒体查询或CSS变量单独控制。
SVG内联后fill不生效？优先检查继承链和currentColor
内联 SVG 的颜色默认不继承父元素的 color，除非显式用 fill="currentColor"。很多开发者直接写 fill="#333" 后发现改 CSS 里的 color 没反应，本质是没启用继承通路。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 SVG 的
<path>、<circle>等图形标签中，把fill属性值设为currentColor（不是 CSS 变量，是关键字） - 确保父容器（比如
<span>或<button>）设置了color，且未被其他规则重置 - 避免在 SVG 标签上写
style="fill: …"内联样式，它会覆盖 CSS 中的fill声明 - 如果 SVG 来自图标库或构建工具自动注入，检查是否已预设了
fill属性——有则需手动删掉或覆盖为currentColor
用width/height控制大小时，viewBox才是关键
只设 width 和 height CSS 属性，常导致 SVG 拉伸变形。真正决定缩放行为的是 viewBox 属性是否存在及取值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 内联 SVG 必须带
viewBox（如viewBox="0 0 24 24"），否则浏览器按“无坐标系”处理，CSS 尺寸仅拉伸像素，不保持比例 -
width和height设为1em、16px或100%都可以，但需配合viewBox才能等比缩放 - 想让 SVG 像文字一样随字号变化，用
width: 1em; height: 1em;+vertical-align: middle;对齐基线 - 慎用
preserveAspectRatio="none"—— 它会强制忽略宽高比，是变形的根源之一
批量控制多个内联 SVG？用 CSS 类 + :is() 或属性选择器
页面里一堆 <svg><path fill="…"></svg>，逐个改太累。直接用 CSS 批量接管更稳。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给所有目标 SVG 加统一 class，如
class="icon"，然后写：.icon path { fill: currentColor; } - 不想加 class？可用属性选择器匹配内联 SVG 中的图形：
svg path[fill] { fill: currentColor !important; }（注意!important是为了覆盖 HTML 中的fill属性） - 现代浏览器可用
:is(svg) path或:where(svg) path提升选择器灵活性，但注意 IE 不支持 - 若 SVG 包含
<use>引用外部 symbol，颜色控制逻辑不同——此时要作用于<use>元素本身，而非源<path>
暗色模式下 SVG 颜色翻车？别只靠color-scheme
color-scheme: light dark 对内联 SVG 几乎无效，因为 SVG 图形不参与系统色主题继承。常见表现是深色模式下图标变成黑底黑图，看不见。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@media (prefers-color-scheme: dark)单独重置color，从而影响currentColor：
@media (prefers-color-scheme: dark) {
.icon { color: #fff; }
}
fill="var(--icon-color)"（注意：HTML 属性值不解析 CSS 变量，必须用 JS 注入或构建时替换）prefers-color-scheme 动态设置 fill 属性，比纯 CSS 更可控最易被忽略的一点：SVG 里可能有多个 fill、stroke、stop-color，甚至 <filter> 里的颜色值——这些全得单独处理，不能只盯着主 fill。
