【发布时间】：2013-01-11 12:58:26
【问题描述】：
我在 Internet Explorer 9 中将 svg 图片作为背景存在一个奇怪的问题。
我测试了以下 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);
成功了！？
【问题讨论】：
-
你能在 JSFiddle 上重复一遍吗？
-
ahm，不知道如何使用托管在本地网络服务器上的图像？
-
验证您的本地网络服务器是否为 svg 文件发送了正确的媒体类型，
image/svg+xml。 -
检查了
image/svg，正如here所说的那样 -
@ErikDahlström 你是对的。从
image/svg更改为image/svg+xml。如果您将此添加为答案，我会接受。
标签： css svg internet-explorer-9