Internet Explorer svg内容高度

Question

我正在为我的网站制作响应式svg组件。我正在尝试创建可以在窗口调整大小时自动缩放的svg元素。我已设置viewBox="0 0 1000 240"和preserveAspectRatio="xMidYMin slice"。它在FF，Chrome和Edge中运行良好，但在IE中我有一个问题。 <svg>元素高度未正确更改。它总是有固定的高度。

这是我的代码：

<div class="scaling-svg-container">
    <svg version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice" viewBox="0 0 1000 240" class="scaling-svg">
        <defs></defs>
        <rect x="0" y="0" width="100%" height="100%" fill="#dbf2b5"></rect>
    </svg>
    <h1> This text should be under svg element. But not working in IE</h1>
</div>

http://codepen.io/anon/pen/LGayeZ

如何避免此问题？

由于