它们都接受所有标准 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 属性（如 ）和外部 CSS 规则（如 circle { fill: red; }）。此时：

• 内联属性（XML 属性）优先级高于普通 CSS 规则，但低于带 !important 的 CSS
• fill 和 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 时，必须确保对应 内定义存在，且 ID 匹配，否则降级为默认 black
• 使用 CSS 自定义属性时，fill: var(--icon-fill, black) 是安全写法，避免变量未定义导致意外黑块

真正容易被忽略的是：SVG 的颜色控制是双轨制——既要理解 CSS 继承规则，又要尊重 SVG 自身的呈现模型。比如 stroke-width 影响视觉粗细，但不会改变 stroke 的颜色解析逻辑；而 vector-effect: non-scaling-stroke 虽然保持描边粗细不变，却对 stroke 的颜色值毫无影响。别把“怎么画”和“画什么颜色”混为一谈。