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

Posted 2023-03-04

【中文标题】使用 svg 作为背景图像的 IE11 失败

【英文标题】：IE11 using svg as background-image fails

【发布时间】：2016-03-17 12:11:06

【问题描述】：

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

Here a little fiddle reproducing my problem

使用它，Edge 可以正确呈现 SVG，IE 只呈现黑色图像……我无法理解这种不同的行为！ 此外，在 Windows 7 机器上 IE11 运行良好！

一些想法？ 提前谢谢各位！

.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>

【问题讨论】：

好吧，我可以复制它，所以你没疯。你能包括 un-base64'd SVG 文本吗？也许那里有一个 IE11 不支持的子功能。

我在Windows 7 (64-bit) 上测试了最新的IE11 上的代码链接，background-image 显示正常。你在什么浏览器和操作系统上看到这个？

@JonathanMarzullo 这是问题所在。 =)

@Katana314 谢谢你的建议，我试试 ;)！

看看下面的文章，尤其是 cmets.. 其他人也有同样的问题，这在 IE11 和 Safari 中不起作用.. css-tricks.com/probably-dont-base64-svg

【参考方案1】：

确保设置背景大小的宽度和高度

背景尺寸：80px 60px;

【讨论】：

更清楚一点：确保设置单独的背景大小宽度和高度，即使两个数字相同：背景大小：20x 20px;

郑重声明，% 对我不起作用，但 px 对我起作用。

【参考方案2】：

深入研究 SVG 文件结构后，我发现问题与 SVG 的样式属性有关。

Adobe Illustrator 在将图形保存为 SVG 文件时为我提供了四种声明样式表属性的选项

演示属性 样式属性 样式属性（实体参考） 样式元素

Accordingly to W3C specs regarding SVG1.1' Styling

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

Here my final fiddle test results

<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> 

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

【讨论】：

太好了，这对我很有帮助。你能在这里添加你的解决方案吗：***.com/q/38069695/916937

【参考方案3】：

如果你和我一样，有 inline SVG 在你的背景中

（例如<svg xmlns='http://www.w3.org/2000/svg'...></svg>）

您需要确保您的编码是charset=utf8（例如url(data:image/svg+xml;charset=utf8,）

还要确保 reserved URL characters 已编码（例如 < === %3C 和 > === %3E）并且您在属性周围使用单引号 ' .

【讨论】：

除此之外，您还需要转义任何# 字符（通过将它们替换为%23，例如这里提到的< 和>）

我用过这个gist，它提供了一些scss函数来做这个，编码内联svg

【参考方案4】：

我也有这个问题。

在我的情况下，更改“样式”设置并没有帮助，但取消选中 Illustrator SVG 导出对话框中的“响应式”复选框确实有帮助，即使 SVG 中有内部 CSS 元素也是如此。

区别在于SVG元素需要一个宽度和高度属性。

当您在 Illustrator SVG 导出对话框中选中“响应式”复选框时，这些属性将不存在。如果这就是它的全部功能，那么我认为它的名字很糟糕。

如果您使用 inkscape 或其他工具来制作 SVG，我相信您的观察结果在添加到此处时会很有价值。

因此，如果您希望 CSS 中的 SVG 背景图像在 IE 中正常工作，请确保 SVG 的根元素具有宽度和高度属性。 （例如，通过取消选中 AI 中的“响应式”复选框）。

宽度和高度属性不必必须是正确的显示尺寸（无论如何都可以通过 CSS background-size 属性改变），但它们确实有成为正确的纵横比。

如果您手动编码 SVG 标记，并且 viewbox 的前两个值为零，那么您可以分别使用后两个值作为宽度和高度。 例如

<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"


viewBox="0 0 298.2 108.8">

【讨论】：

这帮助我解决了定位问题，同时还使用了 svg 作为背景图像。当top top 被指定时，它距离 IE11 的顶部大约 30px。谢谢

遗憾的是这对我没有帮助。

【参考方案5】：

就我而言，在我尝试加载页面的大多数时候，SVG 也是不可见的。但有时，它已加载。

我注意到如果我添加 background: red 然后删除它，SVG 会出现。

将文件转换为 PNG 后，我注意到在添加和删除 background 样式规则后，它的行为方式与 SVG 相同。 所以，我认为 Internet Explorer 将 SVG 转换为 PNG，但有时会失败。