svg 填充颜色不适用于十六进制颜色

Question

正在尝试创建 svg 背景图案，但是：

当我不使用填充时没问题，当使用像这样的颜色名称时：color: red;没问题，但如果使用十六进制颜色，则什么也没有显示。

代码如下：

确定：

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='red' d='M 0,10 H 20 L 10,0 Z' /></svg>")  repeat-x;

不正常：

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='#FF0000' d='M 0,10 H 20 L 10,0 Z' /></svg>")  repeat-x;

也可以在 jsfiddle 上查看：

https://jsfiddle.net/vajnabotond/r362xdjn/19/

Answer 1

# 在 URL 中开始片段标识符。所以，为了让它工作，写 %23 而不是 #。那就是转义 # 字符的值。

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='%23FF0000' d='M 0,10 H 20 L 10,0 Z' /></svg>")  repeat-x;

你可以在下面的 link 中找到很好的解释：https://codepen.io/gunnarbittersmann/pen/BoovjR

svg 填充颜色不适用于十六进制颜色

svg fill color not working with hex colors

css

svg

background