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>