IE9 中的 SVG 宽度

Question

我有一个SVG。 在 Firefox 和 Chrome 中，width:100% 和 height:100% 运行良好。但在 Internet Explorer 9 中则不然。

有人知道怎么解决吗？

谢谢。

更新：

我真正的问题是将这个 SVG 放入 table（IE9 中的宽度很糟糕）。 <td> 是动态的，我不能为 SVG 的容器设置 width。

Answer 1

这是因为 html、body 和 div 元素正在折叠到 SVG 的固有高度。

要解决这个问题，您可以将 html、body 和 div 元素设置为 100% 高度：

html, body, div { width: 100%; height: 100%; }

见http://jsfiddle.net/7Z8kg/2/

---

更新：

好的，据我所知，IE9 无法在 SVG 元素上计算 width 和 height，因此它回退到 default for replaced elements (300×150px)。您在父级 (.ic3-svg-arrow) 上设置了 height 而不是 width，因此 SVG 仍默认为 300px 宽。

我在这里使用the Intrinsic Ratio trick 解决了这个问题：基本上给父元素一个纵横比（在本例中为 1:1）并使用绝对定位使 SVG 适合该大小。这取决于您事先知道纵横比，但似乎可以很好地解决这个问题：

/* Use padding to create a 1:1 aspect ratio */
.ic3-svg-arrow {
    height: 0;
    padding-bottom: 100%;
    position: relative;
}
/* Use positioning to make the SVG fit the ratio */
.ic3-svg-arrow svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

请参阅http://jsfiddle.net/7Z8kg/15/，它在 IE9、IE11、Firefox 和 Chrome 上对我来说都是一样的。

我的灵感来自this article, which has lots of useful SVG sizing tips。