Question

我想为项目添加内联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>

css是这样的：

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

使用图片我习惯将width设置为百分比和height:auto，但这似乎不适用于内联SVG。

这是一个简化的例子，生产情况是一个复杂得多的SVG - 但这很好地说明了这个问题。这需要是一个HTML / CSS解决方案（没有Javascript）。

Here is a fiddle of the issue

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

具有流体高度的内联SVG元件

0 个答案: