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

#在 URLs 中开始一个片段标识符。因此，为了使该工作正常工作，请编写%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;

您可以在以下链接中找到所有详细说明：https : //codepen.io/gunnarbittersmann/pen/BoovjR