<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. jmockit mock 类的static 属性

    final Object[] originValue = new Object[1];try{ new Expectations(XXStatic.class){ { originValue[0] = ...

  2. 在Vue项目中使用Element UI:按需引入和完整引入

    下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...

  3. jieba库的使用和好玩的词云

    1.jieba库基本介绍 (1).jieba库概述 jieba是优秀的中文分词第三方库 - 中文文本需要通过分词获得单个的词语         - jieba是优秀的中文分词第三方库,需要额外安装 - ...

  4. BP neural network optimized by PSO algorithm on Ammunition storage reliability prediction 阅读笔记

    1.BP neural network optimized by PSO algorithm on Ammunition storage reliability prediction 文献简介文献来源 ...

  5. ZedBoard前期准备工作

    1. 资源下载 内核:https://github.com/Xilinx/linux-xlnx/releases uboot:https://github.com/Xilinx/u-boot-xlnx ...

  6. MySQL—概念，用户的创建，主键，外键，数据类型，表格创建

    MySQL DBMS,MySQL的概念,数据库分类,以前MySQL的部署中的一些概念 #DBMS:数据库管理系统,用于管理数据库的大型软件.mysql就是dbms的一种 #Mysql:是用于管理文件的 ...

  7. 对Java中properties类的理解

    转载于:https://www.cnblogs.com/bakari/p/3562244.html 一.Java Properties类 Java中有个比较重要的类Properties(Java.ut ...

  8. Android使用Jenkins自动化构建测试打包apk

    Jenkins这东西搭建起来真是一点也不省心啊,看着别人的教程摸着石头过河,配置的东西有点多啊,稍有不慎,就构建不成功啦!即使步骤跟别人一样也会报各种乱七八糟的错误啊哈哈~~这东西只能佛系搭建~~在经 ...

  9. python学习------迭代器协议和生成器

    一.递归和迭代 递归:自己调用自己 举例解释:问路   A问B康明网络科技怎么走,B说我不是很清楚,我帮你问问C,C说我也不知道.我问问D,D说 就在兴隆.之后D返回结果给C,C返回结果给B,B返回结 ...

  10. 团队服务器搭建（搭建php环境和安装在线mysql管理工具phpmyadmin）

    1.本人良心推荐阿里云,因为他对学生来说优惠很多,比如说9.9/月的云主机,所以这里演示阿里云ubuntu系统,系统可以自己安装的 2.来到阿里云官网https://www.aliyun.com,免费 ...