IE9中的SVG宽度 [英] SVG width in IE9

问题描述

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

I have a SVG. In Firefox and Chrome the width:100% and height:100% is working well. But in Internet Explorer 9 is not.

有人知道如何解决吗?

谢谢.

更新:

我真正的问题是将此SVG放入表(IE9中的宽度太糟了). <td>是动态的，我无法为SVG的容器设置width.

My really problem is putting this SVG into a table (the width is awful in IE9). The <td>'s are dynamic, I can't set width for the container of the SVG.

推荐答案

这是因为html，body和div元素正在崩溃，直至达到SVG的固有高度.

It's because the html, body, and div elements are collapsing down to the intrinsic height of the SVG.

要解决此问题，您可以将html，body和div元素设置为100％高度:

To work around that, you can set the html, body, and div elements to 100% height:

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

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

更新:

好的，据我所知IE9无法在SVG元素上计算width和height，因此它又回到了

OK, as far as I can tell IE9 is failing to calculate a width and height on the SVG element, so it's falling back to the default for replaced elements (300×150px). You're setting a height but not a width on the parent (.ic3-svg-arrow) so the SVG is still defaulting to 300px wide.

我在这里使用本征比"技巧解决了这个问题:本质上给父元素一个长宽比(在这种情况下为1:1)，并使用绝对定位使SVG适应该尺寸.这取决于您事先知道长宽比，但似乎可以很好地解决此问题:

I've worked around it here using the Intrinsic Ratio trick: Essentially give the parent element an aspect ratio (in this case 1:1) and using absolute positioning to make the SVG fit that size. This relies upon you knowing the aspect ratio in advance, but seems to work well for this problem:

/* 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.

See http://jsfiddle.net/7Z8kg/15/ which looks the same to me across IE9, IE11, Firefox and Chrome.

我从本文，其中包含许多有用的SVG尺寸调整提示.

这篇关于IE9中的SVG宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！