css – 在img元素比例不支持在ie9中的SVG

CSS：

img{
    max-height:30px;
}

HTML：

<img src="foo.svg" />

我正在寻找这个svg图像按比例缩放到最大高度为30像素高。 svg的自然尺寸为200像素x 200像素。工程伟大的FF和Chrome(30×30)，但在IE9的图像是30×200。现在这里是踢球者。它只发生在某些SVG文件，其他svgs正确缩放。

看来区别是一个是由多边形组成，另一个是由路径组成。

无法正确缩放：

正确缩放：

任何想法为什么这种情况发生，或者我怎么能得到第一个在ie9成比例地扩大？

解决方法

为了在浏览器之间获得更一致的缩放总是确保指定一个viewBox，但是在svg元素上保留width和height属性。我已经 created a test page比较指定不同的SVG属性的结合CSS中指定的宽度和高度的效果。在几个不同的浏览器中并行比较，你会看到很多处理差异。