为什么 SVG 作为 CSS 背景时，Fill 属性无法识别十六进制颜色值？

文章不知道大家是否熟悉？今天我将给大家介绍《为什么 SVG 作为 CSS 背景时，Fill 属性无法识别十六进制颜色值？》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

以 svg 背景无法支持十六进制颜色的 fill 为例

在将 svg 作为 css 背景时，发现 fill 属性无法识别十六进制颜色值，例如 #acd123，导致颜色无法正常显示。但如果将相同的 svg 以 html 标签形式呈现，则 fill 中的十六进制颜色可以正常显示。

解决方法

由于 css 无法直接识别 svg 内部属性，因此无法支持十六进制颜色值的 fill。但可以通过以下方法解决：

将十六进制颜色值转换为 rgb 形式，并将其写入 fill 属性。例如，十六进制颜色 #acd123 转换为 rgb 形式为 rgb(172, 209, 35)，就可以显示出相应颜色。将其写入代码如下：

.svg {
  box-sizing: border-box;
  width: 100px;
  height: 100px;

  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='rgb(172, 209, 35)' rx='15' stroke='red' /></svg>");
}

<div class="svg">svg的fill颜色</div>

通过这种方法，可以解决 svg 作为 css 背景时 fill 属性不支持十六进制颜色值的问题。

理论要掌握，实操不能落！以上关于《为什么 SVG 作为 CSS 背景时，Fill 属性无法识别十六进制颜色值？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！