5

我想在使用以下.container代码创建的 div中放置一个 svg，以便它完全适合div 的尺寸，但在调整页面大小时仍会随页面大小缩放：.container

<html>
    <body>
    <style type='text/css'>
.container
{
    position:relative;
    width:50%;/*half the width of the whole page*/
    margin:auto;/*center the whole thing*/
}
.set_height
{
    padding-bottom:50%;/*2:1 aspect ratio*/
    position:relative;
    float:left;
    width:100%;
    height:100%;
}
    </style>
        <div class='container'>
            <div class='set_height' style='background-color:blue;'>
            </div>
        </div>
    </body>
</html>

一个长宽比为 2:1 的矩形 svg 可以解决这个问题：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100" height="50" stroke="black" fill="red" stroke-width="5"/>
</svg>

但是，当我这样做时，它会弄乱.containerdiv 的纵横比。使用 chrome，.containerdiv 高度扩展到 100%，这显然不是我想要的：P

提前致谢！

4

2 回答 2

7

我想我明白了。我只是在 div 中放置了一个绝对.containerdiv：

.on_top
{
    position:absolute;
    top:0;left:0;bottom:0;right:0;/*expand this div to the size of its parent*/
}
    <div class='set_width'>
        <div class='on_top'>
            <svg viewBox="0 0 100 50" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <rect x="0" y="0" width="100" height="50" stroke="black" fill="red" stroke-width="5"/>
            </svg>
        </div>
        <div class='set_height'></div>
    </div>

正如ali gajani 建议的那样，我在svg上使用了viewbox

于 2013-08-15T13:43:22.643 回答
4

我认为您需要使用 viewbox 属性：http ://www.w3.org/TR/SVG/coords.html#ExampleViewBox

检查一下，它现在可以扩展：http: //jsfiddle.net/NKRPe/60/

 <svg viewBox="0 0 1500 1000" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100" height="50" stroke="black" fill="red" stroke-width="5"/>
</svg>
于 2013-08-15T13:22:28.343 回答