在ie9中，img元素比例的SVG不受尊重
CSS：
img{ max-height:30px; } HTML：
<img src="foo.svg" />
我正在寻找这个svg图像按比例缩放到30像素高的最大高度。 svg的自然尺寸是200px x 200px。 在FF和Chrome（30×30）中效果很好，但在IE9中，图像为30×200。 现在，这是踢球。 它只发生在某些SVG文件，其他SVG正确缩放。
看来区别在于一个是由多边形组成的，另一个是由path组成的。
不能正确缩放：
http://www.radiantinteractive.com/rshttp://img.dovov.comallies/other/crocs.svg
确实正确缩放：
http://www.radiantinteractive.com/rshttp://img.dovov.comallies/technologyLogos/groovy.svg
关于为什么发生这种情况的任何想法，或者我怎样才能得到第一个在ie9成比例的比例？
为了在浏览器中获得更一致的缩放比例，总是要确保指定一个viewBox但不要在svg元素上使用width和height属性。 我创build了一个testing页，用于比较指定不同的SVG属性和CSS中指定的宽度和高度的效果。 在几个不同的浏览器中并排比较，你会看到很多处理上的差异。
在ie9中修复它，而不是卡住这个。 我不知道为什么，但你应该设置宽度：通过CSS规则的100％，但不是在img标签。 长宽比将工作魔术））它帮助了我，希望这个职位将帮助其他。
你也可以看看这里： https : //gist.github.com/larrybotha/7881691 – 这是这个“故事”的延续。
修复在IE9，IE10，IE11中不能缩放的<img>标签中的SVG
当指定viewBox ， width和height属性时，IE9，IE10和IE11不能正确缩放添加了img标签的SVG文件。 在不同的浏览器上查看这个codepen 。
当图像位于比图像宽度窄的容器内时，图像高度不会缩放。 这可以通过两种方式来解决。
在bash中使用sed来删除SVG文件中的宽度和高度属性
按照Stackoverflow的这个答案，这个问题可以通过删除width和height属性来解决。
这个小脚本将recursionsearch当前工作目录中的SVG文件，并删除跨浏览器兼容性的属性：
find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*" //' -e 's/height="[0-9]*\.*\[0-9]*" //'
注意事项
删除宽度和高度属性将强制图像在非IE浏览器占用其容器的全部宽度。
IE10（其他浏览器需要testing）会将图像缩小到任意大小 – 这意味着您需要为CSS添加width: 100% ，以适合其容器。
以CSS为目标IE
由于上面的解决scheme需要CSS，所以我们不妨使用黑客来获取IE的行为，而不必担心必须pipe理每个单独的SVG文件。
以下将针对包含SVG文件的所有img标签在IE6 +中（仅支持IE9 +支持SVG文件）。
/* * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files * * [1] IE9 * [2] IE10+ */ /* 1 */ .ie9 img[src*=".svg"] { width: 100%; } /* 2 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { img[src*=".svg"] { width: 100%; } }
注意事项
在IE9，IE10和IE11中，每个包含“.svg”的img标签都是针对这个标签的 – 如果你不想在特定的图像上使用这种行为，你将不得不添加一个类来覆盖该图像的行为。
我花了好几个星期的时间来尝试各种解决scheme，以便能够在适用于大型现代浏览器的大小适应性网站中使用SVG。
SVG需要使用CSS百分比进行缩放，并包含embedded的位图图像。
我在IE中调整百分比大小的唯一解决scheme是将外部SVGembedded到<object>标记中。
有很多解决scheme可以将IE中SVG的大小调整为严格的像素大小，但是它们都不适用于百分比大小调整。
我在这里创build了一个非穷举的testing套件。
不知怎的，这scss解决了我的问题。
ul { li { list-style: none; margin: 0; padding: 0; display: inline; img { height: 20px; margin: 0 10px; display: inline-block; } } }
我实际上正在为我的页脚制作一个集中的徽标列表，并且遇到了宽度问题。 通常情况下，我创build一个内嵌块的内嵌块。 使用内联块元素创build一个内联元素为我工作。 这是一个具体的实现，这个bug显示给我，并没有真正解决每一个bug，但希望它可以帮助读这个的人。
