为何 SVG 作为 CSS 背景时，fill 属性不支持十六进制颜色？

SVG 作为 CSS 背景时，fill 属性为何不支持十六进制颜色？

在将 SVG 用作 CSS 背景时，您可能会发现 fill 属性接受蓝字等颜色名称，却无法识别 #acd123 等十六进制颜色。然而，将相同的 SVG 作为 HTML 标签使用时，十六进制 fill 颜色可以正常显示。

原因很可能是因为：

• 当 SVG 作为背景时，CSS 无法主动处理其内部属性，只能识别颜色名称。
• 十六进制颜色对于 CSS 处理而言过于复杂，无法直接识别。

解决方法：

由于十六进制颜色直接设置在 fill 属性中不可行，您可以尝试以下替代方案：

• 使用 RGB() 表示法：将十六进制颜色转换为 RGB 形式，例如 #acd123 => rgb(172, 209, 35)。这种方法将允许 CSS 正确识别颜色并将其应用于 SVG 填充。
• 使用 CSS 变量：在 CSS 中定义一个 CSS 变量来存储十六进制颜色，然后将其引用到 fill 属性中。这样做将绕过 CSS 对 SVG 内部属性的限制，因为变量前缀化后的十六进制颜色被视为 CSS 值，而不是 SVG 值。