SVG 缩放：在 IE9 中保持原始 .svg 高度的父容器答案

【问题标题】：SVG scaling: Parent container maintaining original .svg height in IE9SVG 缩放：在 IE9 中保持原始 .svg 高度的父容器
【发布时间】：2012-10-29 18:26:32
【问题描述】：

**CSS**

.testSVG { background: gray; width: 50%; }
.testSVG img { margin: 10px; max-width: 100%; }

**HTML:** 

<div class="testSVG">
    <img src="http://www.html5rocks.com/static/demos/svgmobile_fundamentals/images/HTML5-  logo.svg" alt="html5">
</div>

SVG Scaling example

在 Firefox 中，父 div（在本例中为 .testSVG）随着缩放的 .svg 图像水平和垂直缩放。

但是在 IE9 中，父 div 水平缩放，而 .svg 仍然水平和垂直缩放。

我也喜欢在 IE 中复制 Firefox 中发生的事情。有人有什么见解吗？

谢谢， Z

【问题讨论】：

你可以将javascript添加到svg，设置一个resize listener并尝试自己处理
作为最后的手段，我可能会这样做，但我更愿意探索无 javascript 方式的可能性。
在IE中，父容器似乎仍然保持原始svg的viewBox高度的高度，其中FF双向缩放。

标签： svg image responsive-design scaling

【解决方案1】：

我有同样的问题，我在一个类似的问题中遵循了答案：

SVG in img element proportions not respected in ie9

基本上我从 svg 标记中删除了高度和宽度属性。

删除这些标签也恰好解决了 Safari 中引入额外间距的问题。

【讨论】：