<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. Asp.Net Boilerplate Project 使用swagger调试api

    文件有点大,去掉了packages文件夹,(Swashbuckle.Core.5.6.0) 链接:https://pan.baidu.com/s/1DzMLhFyRav0dufS4dTeMzg 提取码 ...

  2. 关于隐式创建vue实例实现简化弹出框组件显示步骤

    我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容&q ...

  3. VUE基本常识

    1.运行vue项目  项目根目录git Bash here npm run dev 为了能直接打开项目  配置项目package.json   添加--open  如下图: 2.坑:VUE初写小项目问 ...

  4. webpack打包vue项目，资源路径如何从绝对路径改为相对路径？css中的图片资源如何修改配置？

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  5. 规则引擎 - （三）BOM工程（上）

    建工程并关联xom工程 1.新建——>项目——>规则项目——>标准规则项目. 项目命名,下一步. 在xom设置中选择之前建好的xom工程,下一步. 工程没用到xsd,不选择,下一步. ...

  6. WDA基础十六:ALV的颜色

    这里介绍三种类型的颜色:列的背景色,单元格的背景色,单元格文本的颜色. 1.给ALV结构添加颜色控制字段: 三个字段都是同一类型:WDY_UIE_LIBRARY_ENUM_TYPE COL_BACKG ...

  7. 在Debian9服务器上安装最新版Python

    通过Xshell 6 远程连接linux服务器 安装前的准备工作 更新服务器: 命令:apt update && apt upgrade -y 安装python3的依赖库: 命令:ap ...

  8. Windows上验证过的一些乱七八糟的笔记

    1.Win10安装时报错“windows 无法安装到这个磁盘 gpt分区形式”? 答:shift+f10:  https://jingyan.baidu.com/article/08b6a591c82 ...

  9. Linux getopt/getopts解析命令行参数教程

    一.说明 shell中获取参数可以直接使用$1.$2等形式来获取,但这种方式有明显的限制:每个参数的位置是固定的.比如如果在设计上$1是ip地址$2是端口,那在执行时就必须第一个参数是ip第二个参数是 ...

  10. Surface RT2使用情况

    Surface RT2是一个6年的古董了,暂时还能使用的功能包括但不限于一些xbox小游戏,ppt阅读(加载慢),pdf阅读(加载慢),word阅读. 2018/6/16 爱奇艺关闭了大部分win8R ...