CSS背景中的IE10 SVG

Question

我在CSS樣式中遇到了IE10和SVG的問題。它適用於Chrome和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>); 

這是我的SVG示例，但它在IE10中不起作用。有沒有解決這個問題的機會？不幸的是我沒有機會從HTML載入SVG，應該從CSS加載像例如：

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>

謝謝！

Answer 1

我找到的唯一完整的跨瀏覽器dataURI標頭是data:image/svg+xml; charset=utf8,。

此外，你可能需要encodeURI您的SVG標記：

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