Css 具有流体高度的内联SVG元素

我想为一个项目包含一个内联SVG。我可以将从inkscape生成的SVG转储到HTML文档中，并显示出来。这是一个响应性很强的站点，所以我希望元素能够流畅地调整大小。我一直遇到一个问题，SVG元素的高度是页面加载时文档的高度

<div id="svg">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 500" id="svg4107">
        <defs id="defs4109"></defs>

        <g transform="translate(0,-552.3622)" id="layer1">
            <path d="m 0,552.3622 500,0 c -505.952711,505.95 -225.92979,225.93 -500,500 z" id="rect3260" style="fill:#ffffff;fill-opacity:1;stroke:none"></path>
        </g>
    </svg>
</div>

对于图像，我习惯于将宽度设置为百分比和高度：auto，但这似乎不适用于内嵌SVG

这是一个简化的示例，生产环境是一个复杂得多的SVG——但这很好地说明了这个问题。这需要是一个没有Javascript的HTML/CSS解决方案

---

注意：正如评论中指出的，这似乎是一个blink/webkit问题-firefox工作正常。

@GCyrillus-你说得对。Webkit/闪烁导致红色一直到底部。吼叫声跨浏览器的问题给了我灰色的头发，下一个他们将是白色的，智慧的标志，继续前进；一旦svg大小更改以Chrome/Opera stable（可能是Chrome 36左右）发布，它就会起作用。有关详细信息，请参阅。您的示例在Blink的主干上运行良好。@ErikDahlström感谢您提供的信息。嗯。我喜欢SVG，但我觉得它总是跟在我需要它的地方。在我的例子中，看起来我将使用一个围绕绝对定位的工作。

body {
    padding: 0;
    margin: 0;
}
#svg {
    width: 50%;
    background-color: red;  
}