如果嵌入式背景svg具有“填充"功能，则不会在Firefox上显示.属性 [英] Embedded background svg doesn't display on Firefox if it has a "fill" attribute

问题描述

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

I'm trying to use .svg embedded in .css as the background of a link. Here is the css rule:

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上却无法显示.

It works great on Chrome/Safari/Opera, but not display on Firefox with the "fill" attribute.

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

You can also have a look at http://jsfiddle.net/wenjiehu/rey46ydz/1/ as a live demo for this problem. Try to hover on the links on Firefox.

有人可以告诉我这有什么解决方案吗?

Could someone tell me what's the solution of this?

推荐答案

您应该将#"字符转义为％23"，因为#"是URL字符串中的哈希字符.

You should escape "#" character to "%23" because "#" is hash character in URL string.

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也更好.

But I think using base64 is better too.

这篇关于如果嵌入式背景svg具有“填充"功能，则不会在Firefox上显示.属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！