4

我有一个容器 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 错误 svg 缩放 bg

4

1 回答 1

3

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

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

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

并在 CSSheight中删除了。width<svg>

于 2013-03-03T12:32:13.280 回答