IE11使用svg作为背景图像失败

问题描述

我遇到了一个奇怪的问题，在Windows 10机器上运行的Internet Explorer 11。
使用SVG图像作为背景显示为黑色，Edge使用相同的代码可以正常工作。

I'm facing a weird problem with Internet Explorer 11 running on Windows 10 machine.Using an SVG image as background thats appears totally black, Edge with the same code works fine.

使用这个，Edge正确渲染SVG，只有一个黑色的图像...我不能理解这样一个不同的行为！
此外，在Windows 7机器上IE11工作正常！

Using this, Edge renders SVG rightly, IE renders only a black image...and i can't understand such a different behaviour!Furthermore, on a Windows 7 machine IE11 works fine!

有些想法？

.icon-user-default {
  width: 128px;
  height: 128px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDgwMCA4MDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDgwMCA4MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojODI3OTc3O30KCS5zdDF7ZmlsbDojN0I3MjcwO30KCS5zdDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6I0Q5QTc4Qzt9Cgkuc3Qze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzJfKTtmaWxsOiNGMUYyRjI7fQoJLnN0NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yXyk7ZmlsbDojRTZFN0U4O30KCS5zdDV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO30KCS5zdDZ7ZmlsbDojRUFDMEE3O30KCS5zdDd7ZmlsbDojRjJEN0JDO30KCS5zdDh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6IzJGMzQzQTt9Cgkuc3Q5e2ZpbGw6I0EwQjJCRTt9Cgkuc3QxMHtmaWxsOiNGRkZGRkY7fQoJLnN0MTF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxnIGlkPSJiYWNrZ3JvdW5kIj4KPC9nPgo8ZyBpZD0iT2JqZWN0c18xXyI+Cgk8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI0MDAiIGN5PSI0MDAiIHI9IjMyMS4xIi8+Cgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNzIxLjEsNDAwYzAtMTc3LjMtMTQzLjgtMzIxLjEtMzIxLjEtMzIxLjF2NjQyLjJDNTc3LjMsNzIxLjEsNzIxLjEsNTc3LjMsNzIxLjEsNDAweiIvPgoJPGc+CgkJPGRlZnM+CgkJCTxwYXRoIGlkPSJTVkdJRF8xXyIgZD0iTTcyMS4xLDQwMGMwLTE3Ny4zLTE0My44LTMyMS4xLTMyMS4xLTMyMS4xQzIyMi43LDc4LjksNzguOSwyMjIuNyw3OC45LDQwMAoJCQkJYzAsMTc3LjMsMTQzLjgsMzIxLjEsMzIxLjEsMzIxLjFDNTc3LjMsNzIxLjEsNzIxLjEsNTc3LjMsNzIxLjEsNDAweiIvPgoJCTwvZGVmcz4KCQk8Y2xpcFBhdGggaWQ9IlNWR0lEXzJfIj4KCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMV8iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz4KCQk8L2NsaXBQYXRoPgoJCTxwb2x5Z29uIGNsYXNzPSJzdDIiIHBvaW50cz0iNDQ3LDU4NC4xIDQwMS4xLDY5NS41IDM1Myw1ODQuMSAzNTMsNDgxIDQ0Nyw0ODEgCQkiLz4KCQk8cGF0aCBjbGFzcz0ic3QzIiBkPSJNMzUzLDU0Mi40YzAsMC0xMDAuOCwxMy4xLTExNCwyNi44Yy0xMS41LDEyLTM1LjQsMTI2LjctNDAuOSwxNTEuOWMxNTcsMCwyMDIsMCwyMDIsMHYtNjAuNUwzNTMsNTQyLjR6Ii8+CgkJPHBhdGggY2xhc3M9InN0NCIgZD0iTTQ0Nyw1NDIuNGMwLDAsMTAwLjgsMTMuMSwxMTQsMjYuOGMxMS41LDEyLDM1LjQsMTI2LjcsNDAuOSwxNTEuOWMtMTU3LDAtMjAyLDAtMjAyLDB2LTYwLjVMNDQ3LDU0Mi40eiIvPgoJCTxnIGNsYXNzPSJzdDUiPgoJCQk8cGF0aCBjbGFzcz0ic3Q2IiBkPSJNNDAwLDE4NS45YzQ1LjcsMCwxMTcuOSwyNiwxMTcuOSwxNDcuNmMwLDcwLjItMjIuOSwxMTYuMi0zMi45LDEyOWMtOS4yLDExLjctNjAuOCwzNi43LTg1LDM2LjcKCQkJCUM0MDAsMzc2LjIsNDAwLDE4NS45LDQwMCwxODUuOXoiLz4KCQkJPHBhdGggY2xhc3M9InN0NiIgZD0iTTU0MC42LDM2Mi41YzItMTkuNC03LjItMzYuNy0yMC43LTM4LjVjLTEzLjQtMS44LTI2LDEyLjQtMjgsMzEuOWMtMiwxOS40LDcuMiwzNi43LDIwLjcsMzguNQoJCQkJQzUyNiwzOTYuMiw1MzguNiwzODEuOSw1NDAuNiwzNjIuNXoiLz4KCQk8L2c+CgkJPGcgY2xhc3M9InN0NSI+CgkJCTxwYXRoIGNsYXNzPSJzdDciIGQ9Ik00MDAsMTg1LjljLTQ1LjcsMC0xMTcuOSwyNi0xMTcuOSwxNDcuNmMwLDcwLjIsMjIuOSwxMTYuMiwzMi45LDEyOWM5LjIsMTEuNyw2MC44LDM2LjcsODUsMzYuNwoJCQkJQzQwMCwzNzYuMiw0MDAsMTg1LjksNDAwLDE4NS45eiIvPgoJCQk8cGF0aCBjbGFzcz0ic3Q3IiBkPSJNMjU5LjQsMzYyLjVjLTItMTkuNCw3LjItMzYuNywyMC43LTM4LjVjMTMuNC0xLjgsMjYsMTIuNCwyOCwzMS45YzIsMTkuNC03LjIsMzYuNy0yMC43LDM4LjUKCQkJCUMyNzQsMzk2LjIsMjYxLjQsMzgxLjksMjU5LjQsMzYyLjV6Ii8+CgkJPC9nPgoJCTxwYXRoIGNsYXNzPSJzdDgiIGQ9Ik0yOTcuOCwzNjQuNmg4LjFjMCwwLTUtMzEuNyw5LjYtNDEuOWMwLTE1LjgsMC0yMC41LDAtMjAuNXMtNS42LTAuNy01LjYtMjQuN2MwLTI0LjEsMjguNy00MS4yLDkwLjEtNDEuMgoJCQljMC0zNC4zLDAtODguMSwwLTg4LjFzLTEyMS4zLDIuNi0xMjEuMyw5MC42YzAsMzYuNiwwLDg1LjIsMCw4NS4yczguOS0xLjYsMTUuMiwzLjdDMzAwLjcsMzMzLjUsMjk3LjgsMzY0LjYsMjk3LjgsMzY0LjZ6Ii8+CgkJPHBhdGggY2xhc3M9InN0OCIgZD0iTTUwMi4yLDM2NC42SDQ5NGMwLDAsNC45LTMxLjctOS42LTQxLjljMC0xNS44LDAtMjAuNSwwLTIwLjVzNS42LTAuNyw1LjYtMjQuN2MwLTI0LjEtMjguNy00MS4yLTkwLjEtNDEuMgoJCQljMC0zNC4zLDAtODguMSwwLTg4LjFzMTIxLjMtMi44LDEyMS4zLDg1LjNjMCwzNi42LDAsOTAuNiwwLDkwLjZzLTguOS0xLjYtMTUuMiwzLjdDNDk5LjMsMzMzLjUsNTAyLjIsMzY0LjYsNTAyLjIsMzY0LjZ6Ii8+CgkJPGcgY2xhc3M9InN0NSI+CgkJCTxwb2x5Z29uIGNsYXNzPSJzdDkiIHBvaW50cz0iNDAwLDY2MC42IDM2OCw1NTEuNCAzNTYuMiw2MDAuNiAJCQkiLz4KCQkJPHBvbHlnb24gY2xhc3M9InN0MTAiIHBvaW50cz0iMzUxLjcsNTMxLjEgMzY4LjQsNTUyLjkgMzU2LjIsNjAwLjYgMzMwLjUsNTY1LjkgCQkJIi8+CgkJPC9nPgoJCTxnIGNsYXNzPSJzdDUiPgoJCQk8cG9seWdvbiBjbGFzcz0ic3Q5IiBwb2ludHM9IjQwMCw2NjAuNiA0MjguOSw1NTAuMSA0NDMuOCw2MDAuNiAJCQkiLz4KCQkJPHBvbHlnb24gY2xhc3M9InN0MTAiIHBvaW50cz0iNDQ4LjMsNTMxLjEgNDI4LjYsNTUxLjYgNDQzLjgsNjAwLjYgNDcxLjgsNTY1LjkgCQkJIi8+CgkJPC9nPgoJCTxwYXRoIGNsYXNzPSJzdDExIiBkPSJNNDAwLDQ0Ni43YzIxLjMsMCwzOC41LTcsMzguNS0xNS43aC03Ny4xQzM2MS41LDQzOS43LDM3OC43LDQ0Ni43LDQwMCw0NDYuN3oiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K)
}

<div class="icon-user-default">
</div>

推荐答案

在挖掘到SVG文件结构后，我发现这个问题涉及SVG的样式属性。

After digging into SVG file structure I found that problem concerns the SVG' styling properties.

Adob​​e Illustrator给我四个选项来在将图形保存为SVG时声明样式表属性文件

Adobe Illustrator give me four options to declaring style sheet properties when saving graphics as an SVG file

1. 演示属性


2. 样式属性


3. 样式属性（实体参考）


4. 样式元素

1. Presentation Attributes
2. Style Attributes
3. Style Attributes (Entity Reference)
4. Style Elements

的W3C规范

使用前面三种方式设置样式属性，但将样式表嵌入到< style> 元素内的SVG内容中会导致问题！

No problem using the first three ways to styling properties, but embedding style sheets into SVG content inside a <style> element cause the problem!

<div class="icon-user-default-css1"></div>
<div class="icon-user-default-css2"></div>
<div class="icon-user-default-css3"></div>
<div class="icon-user-default-css4"></div>

我希望对某人有帮助...

I hope will be of help to someone...

这篇关于IE11使用svg作为背景图像失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！