svg fill不生效主因是内联属性优先级高或img引入导致css无法穿透；应内联svg、清除内联fill、用currentcolor继承父color，或defs定义渐变并url引用。
SVG fill 属性为什么有时不生效
直接写 fill: red 却没变色？常见原因不是 CSS 没加载，而是 SVG 元素本身带了内联 fill 属性（比如 <circle fill="black"></circle>），它优先级高于外部 CSS。另外，如果 SVG 是通过 <img> 标签引入的，CSS 根本无法穿透控制内部形状 —— 这时 fill 就完全失效。
解决办法很实际：
- 把 SVG 内联到 HTML 中（即复制粘贴 SVG 代码进 .html 文件），才能用 CSS 选中并修改
fill - 移除所有内联
fill、stroke等属性，或改用!important覆盖（不推荐长期用） - 需要动态换色时，避免用
<img src="icon.svg">，改用<svg><use href="#shape-id"></use></svg>配合 symbol 定义
用 currentColor 实现主题色自动同步
你不需要为每个图标写一遍 fill: var(--primary)。把 SVG 形状的 fill 设为 currentColor，它就会继承父元素的 color 值 —— 这是真正能“一处改、全局变”的方案。
比如：
<span style="color: #2563eb;"> <svg viewbox="0 0 24 24" width="20"><path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z" fill="currentColor"></path></svg></span>
这样点击切换主题色时，只要改 span 的 color，图标颜色立刻响应。注意：必须确保 SVG 内部没写死 fill 值，否则 currentColor 不起作用。
渐变填充要用 <defs></defs> + url(#id)
CSS 的 background-image: linear-gradient() 对 SVG 形状无效 —— SVG 填充渐变只能靠自身定义。你需要在 SVG 内部提前声明 <lineargradient></lineargradient>，再用 fill="url(#grad)" 引用。
关键点：
-
<defs></defs>必须放在 SVG 根节点内、图形元素之前 -
url(#grad)的括号里是#加 ID，不能漏掉#，也不能写成.grad或grad - 渐变方向参数（如
x1="0%" y1="0%" x2="100%" y2="100%"）决定色块走向，数值写错会导致颜色“消失”（其实是跑出图形外了） - 如果想用 CSS 变量控制渐变色 stop，目前做不到 —— stop 的
stop-color不支持 CSS 变量，得用 JS 动态改或预设多套
复杂图形分层填色要靠 fill-rule 和路径顺序
一个 <path></path> 包含多个子路径（比如圆环+内圆），默认可能填满整个包围盒，而不是你想要的“空心”。这时候得靠 fill-rule 控制渲染逻辑。
两种常用值：
-
fill-rule="nonzero"（默认）：按方向积分，顺时针+逆时针抵消，适合单向轮廓 -
fill-rule="evenodd"：奇偶判断，穿过路径奇数次的区域才填充 —— 环形、镂空字、齿轮这类必须用它
另外，路径绘制顺序很重要：外轮廓先画、内轮廓后画，且内轮廓方向最好和外轮廓相反（比如外顺时针、内逆时针），配合 evenodd 才能正确抠空。浏览器不会帮你猜意图，顺序错了，fill-rule 也救不回来。
填色这件事，表面是加个 fill，背后其实是 SVG 渲染模型、CSS 优先级、DOM 加载方式三者咬合的结果。最容易被忽略的是引入方式 —— 用 <img> 图标图省事，结果换色全得切图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
