问题
I have a strange problem with svg images as background in Internet Explorer 9.
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);
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.
I checked all three rules in Opera and they worked.
So what is wrong with the last rule?
//edit
additionally I tested following rule:
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0UzQTgyMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzUyNCkiIC8+Cjwvc3ZnPg==);
worked fine both in IE9 and Opera
//edit 2
I also did try the following:
background-image: url(http://upload.wikimedia.org/wikipedia/commons/a/af/Android-System-Architecture.svg);
it worked!?
回答1:
Make sure that your local webserver sends the correct mediatype for svg files, image/svg+xml.
来源：https://stackoverflow.com/questions/14557784/svg-background-image-in-ie9