svg内联样式不继承css自定义属性，因变量作用域限制；必须将--变量定义在svg容器或:root上，并通过css规则（如.icon path { fill: var(--c, currentcolor); }）绑定fill/stroke，禁用svg内联fill="var()"。
SVG内联样式不继承CSS自定义属性？先确认作用域
SVG元素默认不会从父HTML元素继承CSS自定义属性（--icon-color），除非显式启用继承或通过fill/stroke等属性绑定。常见错误是直接在<svg></svg>外层设style="--icon-color: #3b82f6;"，但内部<path fill="var(--icon-color)"></path>却失效——这是因为<path></path>不在该CSS作用域内，或未声明inherit行为。
实操建议：
- 把自定义属性定义在
:root或SVG容器的class上（如.icon-wrapper { --icon-color: #ef4444; }），确保所有子SVG元素能访问 - 避免在
<svg></svg>标签上用style内联定义变量，它只作用于该元素自身，不向下透传 - 若SVG是
<img src="icon.svg">引入，自定义属性完全不可用——必须内联SVG或用<use></use>引用内联symbol
fill和stroke如何正确绑定var(--color)？注意语法与回退值
fill和stroke支持var()函数，但必须写在CSS中（不能写在SVG内联fill属性里）。例如<path fill="var(--icon-color)"></path>是无效的——SVG解析器不识别var()，它只当字符串处理。
实操建议：
- 把样式移到CSS中：
.icon path { fill: var(--icon-color, currentColor); } - 务必提供回退值（如
currentColor或#000），否则变量未定义时渲染为透明或黑色（取决于浏览器） - 对
<use></use>引用的<symbol></symbol>，需给<use></use>本身加class，或用use:hover path等选择器控制，因为<use></use>克隆的内容不自动继承父级样式变量
currentColor为什么比var(--x)更可靠？适用哪些场景
currentColor天然继承父元素的color值，且所有SVG图形属性（fill、stroke、stop-color）都支持，无需CSS变量声明。它比var(--icon-color)更轻量、兼容性更好（IE9+），特别适合“图标随文字颜色变化”的基础需求。
实操建议：
- 给SVG容器设
color: #10b981;，内部<path fill="currentColor"></path>立即生效 - 配合
font-size缩放SVG：设置width: 1em; height: 1em;，再用font-size控制大小，currentColor会同步响应 - 不适用于需要独立于文字色的多色图标（如带描边+填充不同色），此时仍需
var()配合多个变量（--fill-color、--stroke-color）
使用CSS Shadow Parts穿透Web Component封装边界
当SVG被封装进<custom-icon></custom-icon>这类Web Component时，外部CSS无法直接选中内部<path></path>，var(--x)也因作用域隔离而失效。此时需用::part(icon)暴露样式钩子。
实操建议：
- 在组件内为关键图形添加
part="icon"：<path part="icon" d="M12..."></path>
- 外部CSS通过
custom-icon::part(icon) { fill: var(--icon-color); }注入样式 - 注意Shadow DOM中
var()仍需在custom-icon自身上定义（如custom-icon { --icon-color: #8b5cf6; }），不能依赖全局:root，除非显式inherit
复杂点在于多层封装或动态主题切换时，变量传递链容易断裂；最容易被忽略的是<use></use>引用symbol后，其内部路径不再响应宿主元素的currentColor，必须改用fill="inherit"并确保父容器有明确color值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
