IE10 SVG im CSS-Hintergrund

Question

Ich habe ein Problem mit IE10 und SVG im CSS-Stil. Es funktioniert auf Chrome und 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>); 

Hier mein SVG Beispiel ist, aber es funktioniert nicht in IE10. Gibt es Möglichkeiten, dieses Problem zu lösen? Ich habe keine Gelegenheit Leider SVG von HTML zu laden, sollte es von CSS wie in Beispiel geladen werden:

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>

Dank!

Answer 1

Der einzige vollständige browserübergreifende dataURI-Header, den ich gefunden habe, ist data:image/svg+xml; charset=utf8,.

Auch müssen Sie wahrscheinlich Ihre svg Markup encodeURI:

.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>