SVG在img元素比例不尊重在ie9 [英] SVG in img element proportions not respected in ie9

问题描述

CSS：

img{
    max-height:30px;
}

HTML：

<img src="foo.svg" />

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

I am looking for this svg image to scale proportionately to a max height of 30 pixels high. The natural dimensions of the svg are 200px by 200px. Works great in FF and Chrome (30x30) but in IE9 the image is 30x200. Now here is the kicker. It only happens with certain SVG files, other svgs scale correctly.

似乎差别是一个是由多边形，另一个是由路径。

It seems the difference is one is made of polygons, and the other is made of paths.

无法正确缩放：

可正确缩放：

有关这种情况发生的原因，或我如何获得第一个在ie9中按比例缩放？

any idea on why this happens, or how I can get the first one to scale proportionately in ie9?

推荐答案

为了在浏览器之间获得更一致的缩放总是确保指定 viewBox ，但在<$ c>上留下 width 和 $ c> svg 元素。我创建了一个测试页，用于比较指定不同SVG属性的效果结合CSS中指定的宽度和高度。在几个不同的浏览器中并排比较，您会在处理中看到很多差异。

To get more consistent scaling across browsers always ensure you specify a viewBox but leave off the width and height attributes on your svg element. I've created a test page for comparing the effect of specifying the different SVG attributes in combination with widths and heights specified in CSS. Compare it side by side in a few different browsers and you'll see a lot of differences in the handling.

这篇关于SVG在img元素比例不尊重在ie9的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！