我正在尝试使用嵌入 .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 上的链接上。
有人可以告诉我这个问题的解决方案是什么吗?
您应该将“#”字符转义为“%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 也更好。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)