<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. English Voice of <<Something just like this>>

    歌名:something just like this演唱:Chris Martin 词:Andrew Taggart,Chris Martin 曲:Andrew Taggart,Chris Mart ...

  2. Python自学:第三章 动手试一试 3-4、3-5

    # -*- coding: GBK -*- liebiao = ["zhang", "li", "wang", "zhou&quo ...

  3. 成功解决internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'express'

    ^ Error: Cannot find module 'express'根据提示我们就可以知道,没有找到express这个模块,解决办法就是:npm install express

  4. firewall配置

    词解释 在具体介绍zone之前学生先给大家介绍几个相关的名词,因为如果不理解这几个名词zone就无从入手. target:目标,这个前面学生也已经给大家介绍过了,可以理解为默认行为,有四个可选值:de ...

  5. 初学Git命令

    初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 使用命令git add <file>,注意,可反复多次使用,添加多个文件: 使用命令git commit ...

  6. cookie与sessionStorage机制

    sessionStorage.localStorage和cookie的区别 共同点:都是保存在浏览器端.且同源的 区别: 1.cookie数据始终在同源的http请求中携带(即使不需要),即cooki ...

  7. 基于Kubernetes构建企业容器云

    前言 团队成员有DBA.运维.Python开发,由于需要跨部门向公司私有云团队申请虚拟机, 此时我在思考能否在现有已申请的虚拟机之上,再进行更加细粒度的资源隔离和划分,让本团队的成员使用, 也就是在私 ...

  8. Windows编译安装使用cephfs客户端

    本文介绍如何将cephfs映射到windows的一个盘上,以磁盘映射的方式访问cephfs. 1.下载必要安装包 tdm-gcc:(安装时选32位)https://sourceforge.net/pr ...

  9. Python_Mix*random模块,time模块,sys模块,os模块

    random模块 作用: 生成随机数(整数,小数,从列表中随机抽值,打乱列表顺序) 常用函数: random.random( )生成随机小数 random.uniform( )取一个范围之间的小数 r ...

  10. 【tomcat环境搭建】一台服务器上部署多个tomcat

    一台服务器上面如何部署多个tomcat?其实linux和windows步骤都差不多,都是: 第一步:解压tomcat安装包后,复制一份并且重命名:多个tomcat就多复制一份 第二步:将复制的tomc ...