html – svg在缩放div中_html-js-css

概述我想将svg放在使用 the following代码创建的.container div中,以便它完全适合.container div的尺寸,但在调整页面大小时仍然会缩放： <html> <body> <style type='text/css'>.container{ position:relative; width:50%;/*half the width o 我想将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 height扩展到100％,这显然不是我想要的：P

提前致谢！

解决方法我想我明白了.我只是在.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

总结

以上是内存溢出为你收集整理的html – svg在缩放div中全部内容，希望文章能够帮你解决html – svg在缩放div中所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://www.54852.com/web/1085968.html