内联SVG不工作作为背景图像在IE [英] Inline SVG not working as background-image in IE

问题描述

我试图将 background-image css属性设置为编码的数据URI内容，如下所示在这个小提琴

I'm trying to set the background-image css property to encoded data URI content as shown in this fiddle

它对我测试的所有浏览器的预期工作。唯一没有显示内容的浏览器是IE 9/10。

It works as expected for all browsers I tested. The only browser that doesn't show the contents is IE 9/10.

但我有另一个例子在IE 9/10。这里的区别是，数据URI内容最初是在Chrome中由Raphaël创建的，然后在示例中使用。

But I have another example that works in IE 9/10. The difference here is that the data URI contents are initially created in Chrome (by Raphaël) and then used in the example.

如果SVG是在IE中创建的如果使用 background-image 数据，它不会显示。

If the SVG is created in IE (as in the 1st fiddle by Raphaël) itself it's not being displayed if used as background-image data.

Raphaël的第一个问题在IE？它是与我的代码相关还是可能在RaphaëlSVG绘画中出现问题？

Where is the issue in IE? Is it related to my code or maybe something goes wrong in the Raphaël SVG painting?

推荐答案

它看起来像最多的跨浏览器兼容的方式来做到这一点（和唯一的方式来获得IE显示SVG作为CSS背景）是base64编码（aka dataURI）SVG像你在你的第一个小提琴。

It looks like the most cross-browser compatible way to do this (and the only way to get IE to show the SVG as a CSS background) is to base64 encode (a.k.a dataURI) the SVG as you did in your 1st fiddle.

我发现本文底部的评论讨论有用

I found the comments discussion at the bottom of this article helpful

http://css-tricks.com/probably-dont-base64-svg

这篇关于内联SVG不工作作为背景图像在IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！