内联SVG在IE中不能用作背景图像

时间:2013-06-24 06:55:38

标签: css svg raphael background-image

我正在尝试将background-image css属性设置为编码数据URI内容,如图所示in this fiddle

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

但我有another example在IE 9/10中有效。这里的不同之处在于数据URI内容最初是在Chrome中创建的(由Raphaël创建),然后在示例中使用。

如果SVG是在IE中创建的(如Raphaël的第一小提琴手)本身,如果用作background-image数据则不会显示。

IE中的问题在哪里?它与我的代码有关,或者RaphaëlSVG绘画中出现了什么问题?

1 个答案:

答案 0 :(得分:5)

看起来最兼容浏览器的兼容方式(以及让IE将SVG显示为CSS背景的唯一方法)是将base64编码(也称为dataURI)作为第一小提琴中的SVG

我发现本文底部的评论讨论很有帮助

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