如果Firefox具有"填充"属性,则不会在Firefox上显示嵌入式背景svg

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,但不会在Firefox上显示"fill"属性.

您还可以查看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也更好.