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/

＆＃13;

.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>);
}

＆＃13;

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

＆＃13;

谢谢！

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>

CSS背景中的IE10 SVG

1 个答案: