IE11 不会显示内联 SVG 背景图像答案

【问题标题】：IE11 won't display inline SVG background-imageIE11 不会显示内联 SVG 背景图像
【发布时间】：2017-02-14 10:33:52
【问题描述】：

span {
   background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='12px' height='8px' viewBox='0 -0.297 12 8' style='enable-background:new 0 -0.297 12 8;' xml:space='preserve'><path d='M1.406,0L6,4.594L10.594,0L12,1.406l-6,6l-6-6L1.406,0z'/></svg>");
   display:block;
   height:8px;
   width: 12px;
}

https://jsfiddle.net/d9uu778k/

在除 IE 之外的所有其他浏览器中都能正常工作。我可以在 IE11 中自己查看 SVG 文件，它只是拒绝内联显示它。错误？

【问题讨论】：

IE 对 URL 编码非常严格。也许通过 url 编码器运行图像数据可以解决它。
我试过了，还是一样的问题。 jsfiddle.net/d9uu778k/3

标签： html css svg internet-explorer-11

【解决方案1】：

您需要进行 url 编码（不能保留符号）。

这是一个有效的 IE 示例：

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/%3E%3C/svg%3E")

您可以使用这个很棒的工具：https://yoksel.github.io/url-encoder/

【讨论】：

【解决方案2】：

IE(11) 和 Edge 无法显示内联 svg。您需要转换为base64。 https://stackoverflow.com/a/27322138/4143239
https://css-tricks.com/probably-dont-base64-svg/

【讨论】：