IE9中的SVG背景图像

时间:2013-01-28 08:01:05

标签: css svg internet-explorer-9

我有一个奇怪的问题,svg图像作为Internet Explorer 9中的背景。

我按照css规则进行了测试:

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中正确显示。

我检查了Opera中的所有三条规则并且它们都有效。

那么最后一条规则有什么问题?

//修改

另外我测试了以下规则:

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

在IE9和Opera

中都运行良好

//编辑2

我也尝试了以下内容:

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

有效!?

1 个答案:

答案 0 :(得分:3)

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