容器 div 高度不缩放以匹配 IE 中子 SVG 的高度答案

【问题标题】：container div height does not scale to match height of child SVG in IE容器 div 高度不缩放以匹配 IE 中子 SVG 的高度
【发布时间】：2013-03-03 20:32:13
【问题描述】：

我有一个容器 div，里面有一个 SVG：

<!DOCTYPE html>
<body>
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="200">
    <rect x="0" y="0" width="50" height="200" />
    </svg>
    </div>
</body>

还有以下 CSS：

svg
{
    width: 100%;
    height: 100%;
}
div.container
{
    width: 100%;
    background-color: red;
}

在 firefox、chrome 等中，容器 div 将匹配 svg 的高度。然而，这不是 IE 的情况（我在 IE9 中测试过）。从 svg 样式块中删除 width/height: 100% 将解决此问题，但是我需要这些样式来缩放我的 SVG（在此示例 jsfiddle 中，我在 SVG 元素中省略了 preserveAspectRatio）。

这里是 jsfiddle： http://jsfiddle.net/Cx5jR/

我在想我可以使用 zoom:1 来强制 IE 识别 div 元素上的 hasLayout，但这不起作用。

有什么想法吗？

这是 IE9 中渲染效果的屏幕截图 - 请注意 div（红色背景）不会缩放到 SVG（黑色矩形）高度以下。

【问题讨论】：

能否提供问题的截图？我不确定我是否在 IE9 中看到与您相同的问题 - 尽管渲染与 Chrome 中的不同。另外，如果你事先知道.SVG的高度，为什么不设置height:200px呢？
感谢您的评论，我在此示例中设置的 SVG 只是一个虚拟对象 - 在我的真实示例中，直到页面加载后，我才知道 SVG 的高度和宽度。我使用 offsetWidth 来获取宽度（响应式布局），然后从中计算高度。
在这种情况下，行为的屏幕截图仍然会有所帮助（我想确保我正在复制问题）。
是的，刚刚添加到我的帖子中！

标签： css internet-explorer svg

【解决方案1】：

SVG 目前缺少viewBox 属性，这是一致的跨浏览器渲染所必需的。缺少viewBox，加上在CSS中将SVG的width和height设置为100%似乎是问题的根源。

这是一个在 Chrome 和 IE9 上具有一致呈现的 jsfiddle：http://jsfiddle.net/Cx5jR/3/。

以下内容被添加到<svg> 标记中： viewBox="0 0 50 200" （起点X坐标，起点Y，终点X，终点Y）

并且<svg> 的 CSS 中的 height 和 width 被删除。

【讨论】：

感谢您的建议！今晚晚些时候我会试试这个 - 让你知道。
添加 viewBox 后，我注意到我不需要将 SVG 上的高度设置为 100%，以便 SVG 根据我的响应式布局进行缩放。如果我使用 100% 高度，即使我有 viewBox，也会发生同样的问题。但是添加 viewBox 和 preserveAspectRatio 似乎解决了我在 IE9 中的问题。谢谢！