IE9中的SVG背景图片 [英] SVG background image in IE9

问题描述

我在Internet Explorer 9中将svg图像作为背景存在一个奇怪的问题.

I have a strange problem with svg images as background in Internet Explorer 9.

我测试了以下CSS规则:

I tested following css rules:

background-image: url(./grad.svg);  /* local file */
background-image: url(http://127.0.0.1:7101/path/to/images/grad.png);
background-image: url(http://127.0.0.1:7101/path/to/images/grad.svg);

尽管前两个规则很好用，但最后一个失败.使用F12开发人员工具，它在svg图像上显示(Pending...).直接使用其URL访问图像，它们将在IE9中正确显示.

while the first two rules work great, the last one fails. With the F12 Developer Tools it shows (Pending...) for the svg image. Accessing the images directly with their url, they are shown correctly in IE9.

我检查了Opera中的所有三个规则，它们都起作用了.

I checked all three rules in Opera and they worked.

那最后一条规则怎么了?

So what is wrong with the last rule?

//编辑

我还测试了以下规则:

background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0UzQTgyMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzUyNCkiIC8+Cjwvc3ZnPg==);

在IE9和Opera中都能正常工作

worked fine both in IE9 and Opera

//编辑2

我也尝试了以下方法:

background-image: url(http://upload.wikimedia.org/wikipedia/commons/a/af/Android-System-Architecture.svg);

成功了！?

推荐答案

请确保您的本地网络服务器为svg文件image/svg+xml发送了正确的媒体类型.

Make sure that your local webserver sends the correct mediatype for svg files, image/svg+xml.

这篇关于IE9中的SVG背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！