Question

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文件，它只是拒绝显示内联。错误？

Answer 1

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

Answer 2

您需要进行 url-encode（您不能保留 < 和 > 符号）。

这是一个有效的 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/

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

2 个答案: