在 ie9 中不遵守 img 元素比例中的 SVG [英] SVG in img element proportions not respected in ie9

问题描述

CSS:

img{最大高度:30px；}

HTML:

我正在寻找这个 svg 图像，以按比例缩放到 30 像素的最大高度.svg 的自然尺寸为 200 像素 x 200 像素.在 FF 和 Chrome (30x30) 中效果很好，但在 IE9 中图像为 30x200.现在是踢球者.它只发生在某些 SVG 文件中，其他 svg 可以正确缩放.

似乎区别是一个由多边形组成，另一个由路径组成.

无法正确缩放:

知道为什么会发生这种情况，或者我如何让第一个在 ie9 中按比例缩放?

解决方案

为了在浏览器之间获得更一致的缩放，请始终确保指定 viewBox 但不要设置 width 和height 属性在您的 svg 元素上.我已经创建了一个测试页面来比较在结合 CSS 中指定的宽度和高度.在几个不同的浏览器中并排比较它，你会发现处理方式有很多不同.

CSS:

img{
    max-height:30px;
}

HTML:

<img src="foo.svg" />

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.

does not scale correctly:

http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg

does scale correctly:

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

解决方案

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.

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