SVG中fill和stroke是专用于填充形状和描边路径的颜色属性，不继承父级color值，支持所有CSS颜色写法，默认fill为black、stroke为none，且需区分none与transparent语义差异。
SVG 中的 fill 和 stroke 本质就是颜色属性，但行为和普通 HTML 元素不同
普通 HTML 元素（比如 它们都接受所有标准 CSS 颜色值：命名色（ SVG 元素可以同时有内联 很多人以为 立即学习“前端免费学习笔记（深入）”； 真正容易被忽略的是：SVG 的颜色控制是双轨制——既要理解 CSS 继承规则，又要尊重 SVG 自身的呈现模型。比如 color、background-color 控制文本与背景色，而 SVG 是矢量图形，没有“背景”和“内容”的天然分离。它用 fill 填充形状内部，用 stroke 描边路径——这两个属性才是 SVG 的“颜色主控”，且**不继承自父级 CSS 的 color 值**（除非显式设置 fill: currentColor）。
fill 和 stroke 支持的颜色写法和 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 样式：优先级和继承逻辑差异明显
fill 属性（如 circle { fill: red; }）。此时：
!important 的 CSSfill 和 stroke **不自动继承**父 的颜色，除非显式写 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 时，必须确保对应 black
fill: var(--icon-fill, black) 是安全写法，避免变量未定义导致意外黑块stroke-width 影响视觉粗细，但不会改变 stroke 的颜色解析逻辑；而 vector-effect: non-scaling-stroke 虽然保持描边粗细不变，却对 stroke 的颜色值毫无影响。别把“怎么画”和“画什么颜色”混为一谈。
