svg作为css的background,导致fill不支持十六进制?

Question

下面的代码中,我把svg作为css的background,发现fill属性如果写blue之类的单词,会显示正确的颜色,但换成十六进制,如#acd123,就无效.
但是如果把相同的svg写在body里面,即作为html标签使用,fill里写十六进制的颜色,能正确显示相应颜色.
所以问题来了,把svg作为css背景的情况下,svg下的rect的fill如何才能支持十六进制颜色的写法?

.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='blue' rx='15' stroke='red' /></svg>");}  <div class="svg">svg的fill颜色</div>

Answer 1

URI中可能需要将一些特殊字符进行转换，如这里的#转换成%23(十六进制的23对应于十进制的35，ASCII码中35对应的就是#)。转换之后就可以显示了。

参考资料

• rfc3986

Answer 2

试了一下确实不行。
猜测可能因为svg作为背景的时候css 没法主动处理内部属性，只能识别颜色名称 16进制无法识别；
提供另一个思路:把16进制颜色在线转为rgb形式写入可以出现
例如：#acd123 => rgb(172, 209, 35) 是可以实现效果的

Answer 3

在CSS中，当SVG用作背景图像时，它被视为一个图像，而不是一个可交互的SVG文档。因此，CSS不会解析或处理SVG内部的任何属性，包括fill。当你使用fill='blue'时，它之所以有效，是因为CSS可以识别和处理颜色名称。但是，当你尝试使用十六进制颜色代码（如#acd123）时，CSS无法识别并应用该颜色，因为它将其视为普通的文本，而不是有效的颜色值。

为了解决这个问题，你可以在SVG文件本身中预定义颜色，并在CSS中引用该SVG文件。然后，你可以使用CSS变量或内联样式来更改SVG中元素的颜色。以下是一个示例：

1. 首先，将SVG保存为一个单独的文件（例如my-svg.svg），并确保其内部的rect元素具有一个唯一的ID或类名，以便在CSS中引用它。

<!-- my-svg.svg --><svg xmlns='http://www.w3.org/2000/svg'>  <rect id="my-rect" width='100%' height='100%' fill='var(--fill-color)' rx='15' stroke='red' /></svg>

2. 在你的CSS中，定义一个颜色变量，并将其设置为所需的十六进制颜色值。然后，将该变量用作SVG背景，并使用fill属性将其应用于rect元素。

:root {  --fill-color: #acd123;}.svg {  box-sizing: border-box;  width: 100px;  height: 100px;  background: url("my-svg.svg");  background-size: cover;}

3. 最后，在你的HTML中，使用div元素应用svg类，并设置所需的背景颜色。

<div class="svg"></div>

通过这种方式，你可以在SVG文件中预定义颜色，并使用CSS变量或内联样式在CSS中更改它。这样，无论你将SVG用作背景图像还是内联SVG，都可以正确应用十六进制颜色值。