<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div style='width:30%;height:600px'>

            <svg viewBox="0,0,640,480" >

                <rect x="0" y="0" width="100%" height="100%" fill="green"/>

                <rect x="10" y="10" width="100" height="100" fill="orange" />

                <rect x="200" y="300" width="90" height="90" fill="orange" />

                <circle id='eyunxiaojie' cx="400" cy="1500" r="50" fill="gray" />

            </svg>

    </div>

</body>

</html>

　　viewBox的四个参数分别代表：最小X轴数值；最小y轴数值；宽度；高度。

svg 高宽随父元素自适应的更多相关文章

  1. HTML布局之左右结构，左边固定右边跟据父元素自适应

    HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...

  2. css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

  3. float元素的父元素自适应高度

    当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种. 1.对父元素设置固定高度 2.使用clear清除浮动 3. ...

  4. [问题记录]父元素position:relative的深坑

    个人博客迁移至:https://blog.plcent.com/欢迎大家访问 今天在写全屏切换的时候,发现一个问题就是切换时只能滚动第一屏,其他屏死都不动, 全屏滚动的原理: 是每次滚动父元素向上滚动 ...

  5. CSS子元素居中(父元素宽高已知，子元素未知)

    <style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...

  6. 搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内(完成)

    onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回 ...

  7. css样式： 宽高按一定比例进行自适应

    纯 CSS 实现高度与宽度成比例的效果 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 ...

  8. 关于Google圆角高光高宽自适应按钮及其拓展

    关于Google圆角高光高宽自适应按钮及其拓展————源自张鑫旭css讲解 这篇文章发布于 2009年10月24日,星期六,18:08,归类于 css相关. 阅读 48770 次, 今日 1 次 by ...

  9. 元素绝对定位以后设置了高宽，a标签不能点击的原因总结

    元素绝对定位以后设置了高宽,a标签不能点击的原因: 1.元素内并无内容 2.背景是透明的,无任何背景图或者颜色 解决方法: 1.如果不是绝对定位元素的,可以用相对定位 2.给元素加透明的背景图 3.I ...

随机推荐

  1. Data Block -- Uncompressed

    Overview of Data Blocks Oracle Database manages the logical storage space in the data files of a dat ...

  2. Python字符串 --Python3

    Python语言中,字符串是用两个双引号或者单引号括起来的词汇表或多个字符. 1.Python字符串的两种序号体系 反向递减序号:-- -9 -8 -7 -6 -5 -4 -3 -2 -1 正向递增序 ...

  3. 【转】解决Android 6.0 NoSuchContextException 和WEBVIEW_undefined 的问题

    在 Android 4.4 操作系统上测试混合应用时,可以直接顺利的在native模式和webview模式之间切换,但是在Android6.0 操作系统上却报NoSuchContextExceptio ...

  4. 菜鸡学C语言之真心话大冒险

    题目描述 Leslie非常喜欢真心话大冒险的游戏.这一次游戏的规则有些不同.每个人都有自己的真心话,一开始每个人也都只知道自己的真心话.每一轮每个人都告诉指定的一个人他所知道的所有真心话,那么Lesl ...

  5. 【PAT】反转链表

    PAT 乙级 1025 给定一个常数 K 以及一个单链表 L,请编写程序将 L 中每 K 个结点反转.例如:给定 L 为 1 → 2 → 3 → 4 → 5 → 6,K 为 3,则输出应该为 3 → ...

  6. 调试内核打印debugfs

    新年第一天更博.这么勤劳我一定是小仙女`_>` 前几天调试时候,因为处理速度问题,师父给的建议是把应用中不重要的打印删掉.内核中也不要直接用printk,可以把想查看的数据通过debugfs来查 ...

  7. gitlab安装随记

    gitlab安装 配置yum源 sudo vim /etc/yum.repos.d/gitlab-ce.repo 按照网上别人的例子,修改为清华的源 [gitlab-ce] name=Gitlab C ...

  8. mybatis的配置与使用

    mybatis的配置与使用 一.全局配置文件配置 properties标签 Properties标签可以用来加载配置文件.例如,我们可以将数据库的连接信息放入到一个配置文件(db.properties ...

  9. mysql:mysql is neither service nor target!?(suse12 sp2 )

    今天想在自己的虚拟机上安装mysql,安装好了并且初始化之后,一直无法启动mysql. 1.service mysql start; 报错:mysql is neither service nor t ...

  10. Java 自增原理

    很多人都知道 i++ 和 ++i 的区别 a = i++: a = i; i = i+1; a = ++ i; i = i + 1; a = i; 但碰到 i = i ++;的时候很多人就懵了? i是 ...