CSS背景中的IE10 SVG答案

【问题标题】：IE10 SVG in CSS backgroundCSS背景中的IE10 SVG
【发布时间】：2016-08-14 07:07:52
【问题描述】：

我对 IE10 和 SVG 的 CSS 样式有疑问。它适用于 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>);
}

&lt;div class='foo'&gt;&lt;/div&gt;

谢谢！

【问题讨论】：

标签： html css internet-explorer svg

【解决方案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');
}

&lt;div class='foo'&gt;&lt;/div&gt;

【讨论】：

完美运行！只是js encodeURI函数还是别的什么？
在这个例子中我使用了encodeURIComponent()，但encodeURI() 也应该可以工作。
对我来说，问题在于我的 SVG 使用了内联 <style> 标签。 IE10 显然对此感到窒息，因此我不得不将其剥离并直接在<path>、<fill> 上应用样式，无论是什么元素。实际上，我只是在 SVG 上使用了 SVGO 并为我删除了它。