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/

- Botond Vajna

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;

您可以在以下链接中找到完整的解释：https://codepen.io/gunnarbittersmann/pen/BoovjR

- radovix