<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. 迁移学习 transferlearning

    2019-04-08 13:25:17 在实践中,很少有人从头开始训练整个卷积网络(随机初始化),因为拥有足够大小的数据集是相对罕见的.相反,通常在非常大的数据集(例如ImageNet,其包含具有10 ...

  2. kindle 安卓 app下载的电子书放在什么文件夹？

    They are buried in: /sdcard/Android/data/com.amazon.kindle/files/

  3. GT sport赛道详解 - 富士国际赛车场

    练了3-4个小时,最好的成绩只有2'09多,这5秒真的很难跨越,很是绝望,感觉碰到瓶颈了. 看了几个视频,发现大家的走线有些差异,但是切apx的极速都是一样的,所以在复合弯道,走线其实不止一种. 分析 ...

  4. HBase Block Cache（块缓存）

    Block Cache HBase提供了两种不同的BlockCache实现,用于缓存从HDFS读出的数据.这两种分别为: 默认的,存在于堆内存的(on-heap)LruBlockCache 存在堆外内 ...

  5. introduce explaining variable 引入解释变量

    一段复杂的计算的表达式(一般 逻辑判断  if(a!=1 && b!=Null && a>b  ) && .... 直接在代码中参与到 代码的逻辑 ...

  6. WebvirtCloud安装(CentOS7)

    1.安装依赖包wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repoyum -y install p ...

  7. Python函数分类及操作

    为什么使用函数? 答:函数的返回值可以确切知道整个函数执行的结果   函数的定义:1.数学意义的函数:两个变量:自变量x和因变量y,二者的关系                      2.Pytho ...

  8. 使用npm私有服务器保存公司内部强业务类型组件(三):关于业务性组件的一点思考

    编写业务性组件最难的地方不在于技术,而在于沟通, 1:前端将业务给封装了起来,必然导致产品在设计的时候多了一层考虑,在新增功能的时候 他要考虑这个功能是不是在其他项目也需要,如果不是的话,就不应该放在 ...

  9. android -------- RecyclerView的可（多个Item水平，垂直）滚动列表的实现

    RecyclerView的可滚动的列表实现,视图相邻的视图在屏幕上部分或完全可见(水平3个item,第一个和第三个显示一部分,第二个完全显示) 效果如图: 基于RecyclerView完成的(自定义控 ...

  10. font——文字属性大全

    一.字体风格(font-style) <style type="text/css"> /*默认值.浏览器显示一个标准的字体样式.*/ p.normal {font-st ...