<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. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  2. 用node+webpack+vue新建vue项目步骤

    1. 安装node,命令行输入node-v命令查看是否安装成功. 2. 安装vue:npm install vue-cli -g(全局安装). 3. 在想要创建vue项目的目录下,按住shift+右键 ...

  3. helm一键 安装mariadb-ha（详细）

    一. 二.单机安装一主一从 先创建对应pv https://github.com/helm/charts/blob/master/stable/mariadb/templates/master-sta ...

  4. vs.net2015发布web网站时，提示JsonIgnoreAttribute无法找到的解决办法

    产生该问题的原因是因为项目中引用了两个版本的newtonsoft.json.dll,具体解决办法参见: 用记事本打开项目文件(*.csproj) 可以找到在这个文件中,有两处Newtonsoft.Js ...

  5. 运用python绘制小猪佩奇

    用python绘制小猪佩奇 1.打开idle 2.点击File-New Files 3.输入以下代码 1. from turtle import * 2. 3. def nose(x,y):#鼻子 4 ...

  6. nginx反向代理后应用程序如何获取客户端真实IP

    每个location中增加配置: proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_se ...

  7. 学习笔记------------解决margin塌陷

    首先来解释一下什么是marg塌陷? 父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值 正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位 但是m ...

  8. 比较推荐学习Linux系统应该看的书籍

    对于如何学习Linux,我想大家多多少少会有自己的一些想法--不管是学过Linux的还是没有学过Linux的.学习,对于我们来说,应该不是一件陌生的事:从小学开始,然后中学.大学.乃至于读硕读博,可以 ...

  9. Divisor Subtraction

    Description You are given an integer number nn. The following algorithm is applied to it: if n=0, th ...

  10. Mysql 源码：关于innodb中两次写的探索

    转载自:http://www.cnblogs.com/bamboos/p/3553703.html?utm_source=tuicool&utm_medium=referral 两次写可以说是 ...