SVG中fill和stroke是专用于填充形状和描边路径的颜色属性，不继承父级color值，支持所有CSS颜色写法，默认fill为black、stroke为none，且需区分none与transparent语义差异。
SVG 中的 fill 和 stroke 本质就是颜色属性，但行为和普通 HTML 元素不同
普通 HTML 元素（比如 <div>）靠 color、background-color 控制文本与背景色，而 SVG 是矢量图形，没有“背景”和“内容”的天然分离。它用 fill 填充形状内部，用 stroke 描边路径——这两个属性才是 SVG 的“颜色主控”，且**不继承自父级 CSS 的 color 值**（除非显式设置 fill: currentColor）。
fill 和 stroke 支持的颜色写法和 CSS 完全一致
它们都接受所有标准 CSS 颜色值：命名色（red）、十六进制（#ff0000）、RGB（rgb(255, 0, 0)）、RGBA（rgba(255, 0, 0, 0.5)）、HSL、HSLA，甚至 CSS 变量（var(--primary)）。但要注意：
-
fill默认值是black，不是transparent；stroke默认值是none（即无描边） - 透明度必须用
rgba()或hsla()，不能靠opacity—— 因为opacity会同时影响填充和描边，且作用于整个元素 - 当
fill设为none时，等价于完全透明，但比rgba(0,0,0,0)更语义清晰且兼容性更好
内联属性 vs CSS 样式：优先级和继承逻辑差异明显
SVG 元素可以同时有内联 fill 属性（如 <circle fill="blue">）和外部 CSS 规则（如 circle { fill: red; }）。此时：
- 内联属性（XML 属性）优先级高于普通 CSS 规则，但低于带
!important的 CSS -
fill和stroke**不自动继承**父<g>或<svg>的颜色，除非显式写fill="currentColor"或在 CSS 中用fill: currentColor -
currentColor是关键桥梁：它取当前元素计算后的color值，常用于让 SVG 图标随文字颜色变化
svg {
color: #333;
}
.icon path {
fill: currentColor; /* 此时 path 会变成 #333 */
}常见踩坑：渐变、图案、none 和透明的混淆
很多人以为 fill="transparent" 和 fill="none" 等价，其实不然：
立即学习“前端免费学习笔记（深入）”；
-
fill="none"表示“不绘制填充”，渲染引擎跳过填充阶段，性能略优 -
fill="transparent"是真实颜色值，仍会触发填充绘制流程，只是画了全透明像素——在某些旧浏览器或 Canvas 导出中可能表现异常 - 渐变（
url(#grad)）或图案（url(#pattern)）赋给fill时，必须确保对应<defs>内定义存在，且 ID 匹配，否则降级为默认black - 使用 CSS 自定义属性时，
fill: var(--icon-fill, black)是安全写法，避免变量未定义导致意外黑块
真正容易被忽略的是：SVG 的颜色控制是双轨制——既要理解 CSS 继承规则，又要尊重 SVG 自身的呈现模型。比如 stroke-width 影响视觉粗细，但不会改变 stroke 的颜色解析逻辑；而 vector-effect: non-scaling-stroke 虽然保持描边粗细不变，却对 stroke 的颜色值毫无影响。别把“怎么画”和“画什么颜色”混为一谈。
