svg内联时fill不生效的主因是子元素（如path、circle）自带内联fill属性，优先级高于svg标签或css设置；应删掉子元素fill，统一用svg标签fill或currentcolor配合父元素color控制。
SVG内联时fill不生效的常见原因
直接在<svg></svg>标签里写fill="red"却没变色，大概率是图标路径本身带了fill内联样式，把父级设置给覆盖了。SVG渲染优先级：元素自身fill属性 > <svg></svg>标签上的fill > CSS类里的fill。
实操建议：
- 用浏览器开发者工具检查
<path></path>或<circle></circle>等子元素，看是否已有fill="#000"这类硬编码值 - 删掉子元素的
fill属性，再统一在<svg></svg>上设fill，最省事 - 如果必须保留子元素原有颜色（比如多色图标），就别碰
<svg></svg>的fill，改用CSS控制svg path { fill: currentColor; }
用currentColor让SVG随文字颜色自动变化
这是最灵活的方案，尤其适合按钮、导航栏里需要主题色联动的图标。原理是让SVG内部所有未显式指定fill的形状继承父元素的color值。
实操建议：
- 确保
<svg></svg>和它的子元素（如<path></path>）都没写死fill，或者把它们改成fill="currentColor" - 给SVG父容器加CSS，比如
button { color: #1890ff; }，图标立刻同步变蓝 - 注意：IE不支持
currentColor在SVG中使用，如需兼容IE，得用JS动态注入颜色或改用CSS变量+fill: var(--icon-color)
外部SVG文件用use引入时fill失效怎么办
用<use href="icon.svg#id"></use>引用外部SVG时，<svg></svg>标签上的fill对<use></use>内容完全无效——这是规范行为，不是bug。
实操建议：
- 外部SVG文件里，把所有
<path fill="..."></path>改成<path fill="currentColor"></path> - 在页面中给
<use></use>元素本身加class，再用CSS控制：.icon { color: #52c418; } - 如果外部SVG不能修改（比如CDN图标库），只能用
object或iframe嵌入，但会失去CSS控制能力；或者用fetch加载后手动注入DOM并替换fill值
fill和stroke在不同SVG场景下的取值差异
fill管内部着色，stroke管描边，但它们能接受的值类型和默认行为容易混淆。
实操建议：
-
fill和stroke都支持颜色名、十六进制、rgb()、hsl()，也支持none（透明填充/无描边）和currentColor -
fill默认是black，stroke默认是none——所以只设stroke="red"时，图形可能看着是空心的 - 想让描边随主题变色但填充固定，可以混用：
fill="#fff" stroke="currentColor" - 用
fill-opacity或stroke-opacity调透明度，比用rgba()更兼容旧版Safari
background-image: url(...)）时，fill完全不起作用——这时候只能换内联SVG或用mask/image-set方案。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
