问题
I've been trying to use a SVG as a background-image for an element scaling it using the background-size-property. This works great in most current browsers, but Internet Explorer seems to misinterpret the values, showing the image in a much smaller size when I use only one value, and an incorrect ratio with two values.
I've put up an example at http://jsfiddle.net/c7DEw/1/
The width and height of the svg have been set to 100%. I figured it had something to do with the viewBox and enable-background properties, but these don't seem to have any effect.
This happens both in Internet Explorer 9 and 10.
Has anybody encountered this behaviour before? And if so, how did you fix it?
回答1:
I had a similar problem with svg files generated by Illustrator for use as background images, and after much trial and error the fix seems to be just to edit each svg file and declare the width and height of the svg as attributes, e.g. <svg width="32px" height="128px"> (something that Illustrator doesn't set but Sketch does). This caused the svgs to behave the same in IE 10/11 as they do in Chrome/FF.
回答2:
I just had this problem again with another projects. I copied assets individually from an Illustrator design to a new file and changed the artboard to perfectly line up with its bounding box. I then included the SVGs via the CSS background-property and noticed the smaller display size in both IE10 and IE11.
After then reopening the assets in Illustrator, copying them over to Sketch and exporting them to SVG this behavior disappeared.
It looks like Illustrator is creating an Artboard (or container) of an incorrect size, which throws of the dimensions. But I've googled this question multiple times and have not found anyone else encountering this issue, so it may be something I'm doing wrong. But the process is so straightforward that I can't imagine what it could be.
来源：https://stackoverflow.com/questions/16092114/svg-background-size-differs-in-internet-explorer-9-10