CSS背景中的IE10 SVG

Question

I have a problem with IE10 and SVG in CSS style. It works on chrome and firefox:

background-image: url(data:image/svg+xml,<svg\ version=\"1.1\"\ xmlns=\"http://www.w3.org/2000/svg\"\ width=\"32px\"\ height=\"32px\"\ viewBox=\"0\ 0\ 32\ 32\"><circle\ fill=\"red\"\ cx=\"16\"\ cy=\"16\"\ r=\"12\"/></svg>);

Here is my SVG example, but it doesn't work in IE10. Are there any opportunities to resolve this problem? Unfortunately I have no opportunity to load SVG from HTML, it should be loaded from CSS like in example:

http://jsfiddle.net/fgLtkn1n/1/

 .foo { display:inline-block; width:32px; height:32px; border: 1px solid gray; background-image: url(data:image/svg+xml,<svg\\ version=\\"1.1\\"\\ xmlns=\\"http://www.w3.org/2000/svg\\"\\ width=\\"32px\\"\\ height=\\"32px\\"\\ viewBox=\\"0\\ 0\\ 32\\ 32\\"><circle\\ fill=\\"red\\"\\ cx=\\"16\\"\\ cy=\\"16\\"\\ r=\\"12\\"/></svg>); } 

 <div class='foo'></div> 

Thanks!

Answer 1

The only full cross-browser dataURI header I found is data:image/svg+xml; charset=utf8, data:image/svg+xml; charset=utf8, .

Also, you'll probably need to encodeURI your svg markup :

 .foo { display:inline-block; width:32px; height:32px; border: 1px solid gray; background-image: url('data:image/svg+xml; charset=utf8, %3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20fill%3D%22red%22%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%2F%3E%3C%2Fsvg%3E'); } 

 <div class='foo'></div>