Question

我想将svg放在使用the following代码创建的.container div中，以便它与.container div的尺寸完全匹配，但仍然会按照页面的大小进行缩放因为它已调整大小：

<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>

然而，当我这样做时，它会混淆.container div的宽高比。使用chrome .container div高度扩大到100％，这显然不是我想要的：P

提前感谢！

Answer 1

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

.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>

我将svg上的viewbox用作ali gajani suggested

Answer 2

我认为您需要使用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>

svg在缩放div中

2 个答案: