Html 缩放div中的svg_Html_Css_Svg

Html 缩放div中的svg

html css svg

Html 缩放div中的svg,html,css,svg,Html,Css,Svg,我想在使用代码创建的.containerdiv中放置一个svg，使其与.containerdiv的尺寸完全匹配，但在调整页面大小时仍会随页面大小进行缩放： <html> <body> <style type='text/css'> .container { position:relative; width:50%;/*half the width of the whole page*/ margin:auto;/*cen

我想在使用代码创建的

.container

div中放置一个svg，使其与

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


.集装箱
{
位置：相对位置；
宽度：50%；/*整个页面宽度的一半*/
边距：自动；/*居中*/
}
.设置高度
{
填充底部：50%；/*2:1纵横比*/
位置：相对位置；
浮动：左；
宽度：100%；
身高：100%；
}

就本问题而言，宽高比为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

提前谢谢

我认为您需要使用viewbox属性：

选中此项，它现在可以缩放：

我想我明白了。我只是在

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

。在顶部
{
位置：绝对位置；
顶部：0；左侧：0；底部：0；右侧：0；/*将此div扩展到其父级的大小*/
}

我使用svg上的viewbox更新了我的浏览器中的问题，蓝色div已经做得非常高了。这对你来说是一样的吗？希望是可能的，但还是不对。我希望svg填充到蓝色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>