Question

我有一个容器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样式块中删除宽度/高度：100％将解决此问题，但是为了扩展我的SVG，我需要这些样式（我在这个示例jsfiddle中省略了SVG元素中的preserveAspectRatio）。

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

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

有什么想法吗？

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

IE9 bug svg scale bg

Answer 1

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

以下是一个jsfiddle，它在Chrome和IE9中具有一致的呈现效果：http://jsfiddle.net/Cx5jR/3/。

以下内容已添加到<svg>标记中： viewBox="0 0 50 200" （开始X坐标，开始Y，结束X，结束Y）

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

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

1 个答案: