css - 如果嵌入的背景 svg 具有 "fill"属性，则它不会在 Firefox 上显示

Question

我正在尝试使用嵌入 .css 中的 .svg 作为链接的背景。这是 CSS 规则:

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10px" height="7px"><g><g><polygon points="8.433,-0.06 4.985,3.325 1.539,-0.06 -0.066,1.546 4.985,6.566 10.037,1.546" fill="#61B23B"/></g></g></svg>');

它在 Chrome/Safari/Opera 上运行良好，但在带有“fill”属性的 Firefox 上无法显示。

您还可以查看http://jsfiddle.net/wenjiehu/rey46ydz/1/作为这个问题的现场演示。尝试将鼠标悬停在 Firefox 上的链接上。

谁能告诉我这个问题的解决办法是什么？

Answer 1

您应该将“#”字符转义为“%23”，因为“#”是 URL 字符串中的哈希字符。

http://jsfiddle.net/dmen16me/

url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10px" height="7px"><g><g><polygon points="8.433,-0.06 4.985,3.325 1.539,-0.06 -0.066,1.546 4.985,6.566 10.037,1.546" fill="%2361B23B"/></g></g></svg>');

但我认为使用 base64 也更好。