IE10 SVG в фоновом режиме CSS

У меня проблема с IE10 и SVG в стиле CSS. Работает на хроме и фаерфоксе:

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. Есть ли возможности решить эту проблему? К сожалению, у меня нет возможности загрузить SVG из HTML, его нужно загрузить из 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>

Спасибо!


svg html css internet-explorer
person Alexander    schedule 21.04.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Единственный полный кросс-браузерный заголовок 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>

person Kaiido    schedule 21.04.2016
comment
Работает идеально! Просто функция js encodeURI или что-то еще? - person Alexander; 21.04.2016
comment
для этого примера я использовал encodeURIComponent(), но encodeURI() тоже должно работать. - person Kaiido; 21.04.2016
comment
Для меня проблема заключалась в том, что мой SVG использовал встроенный тег <style>. Очевидно, IE10 задыхается от этого, поэтому мне пришлось убрать это и применить стили непосредственно к <path>, <fill> и любым другим элементам. На самом деле, я просто использовал SVGO в SVG, и это удалило его для меня. - person romellem; 31.10.2017