带有viewBox和width的SVG在IE中未正确缩放高度

Question

我试图构造带有viewBox属性的内联SVG，但没有显式的width或height属性。我正在使用CSS将SVG的宽度设置为100%。这将允许SVG缩放到其包装容器中，保持由ViewBox设置的纵横比。在Chrome和Firefox中，这是完美的！

下面是我所讲内容的一个最小代码示例：http://codepen.io/pcorey/pen/amkgl

HTML：

<div>
  <svg viewBox="0 0 100 10">
    <text x="1" y="9">hello</text>
  </svg>
</div>

CSS：

div {
  width: 400px;
}

svg {
  width: 100%;
  max-height: 100%;
  outline: 1px solid tomato;
}

text {
  font-size: 10px;
}

viewBox是100x10。外部div设置为400px宽度。这意味着SVG的高度应该是40px（在Chrome/Firefox中也是如此）。但是，在IE 11中，宽度总是150px（即使当div的宽度超过1500px...)

在IE中有没有很好的方法来解决这个问题？为什么IE不能正确处理未知的高度？我可以使用“内部纵横比”技巧，但这是非常糟糕的，需要另一个DOM元素，并且要求我在包装器每次调整大小时重新计算填充顶部。

关于我为什么要这样做的更多信息，我写了一篇关于它的快速博客文章:http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-Svg-text/

谢谢你的帮助！

Answer 1

在所有浏览器中都可以使用的一种解决方法是将一个空白图像添加到SVG所在的容器中,该容器具有与SVG相同的维度：

null

.wrap {
  position: relative;
}
img {
  width: 100%;
  height: auto;
}
.viz {
  position: absolute;
  top: 0;
  left: 0;
}

html lang-html prettyprint-override"><div class="wrap">
  <img src="img/blank.png" />
  <div class="viz">
    <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 1000 600"></svg>               
  </div>
</div>