CODEWITHSUNDEEP
csssvgbackground
wenjiehu
wenjiehu

Reputation: 353

Embedded background svg doesn't display on Firefox if it has a "fill" attribute

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>');

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

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?

Upvotes: 2

Views: 1869

Answers (1)

defghi1977
defghi1977

Reputation: 5349

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>');

But I think using base64 is better too.

Upvotes: 8

Related Questions