SVG跟随父级DIV自适应
后台返回过来的是这样的SVG标签
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0 0)">
<rect x="0" y="0" width="100%" height="100%" fill="#EBECEF" stroke="#4F5052" stroke-width="1" />
<g transform="translate(586 0) rotate(90 0 0)">
<path bid="1" d="M305 0L305 383.5C305 495.34 214.34 586 102.5 586L0 586L0 0L305 0"
fill="#FFFFFF" stroke="#4F5052" stroke-width="1" />
</g>
</g>
</svg>
刚开始怎么设置svg的width height 属性都是没有生产。。不能自适应。只看到 小一部分。
后来看到别人加上一个 viewBox="0,0,640,480",问题迎刃而解。。查了下。viewBox就是说用于SVG自适应的,四个值分别代表最小X轴数;最小y轴数;宽度;高度。
知道后可以动态添加OK了
window.onload = function () {
let svg = document.getElementsByTagName('svg');for (let index = ; index < svg.length; index++) {
svg[index].setAttribute("viewBox", "0,0,"+svg[index].getBBox().width+","+svg[index].getBBox().height+"")
}
}
SVG跟随父级DIV自适应的更多相关文章
- <转载>如何解决子级用float浮动父级div高度不能自适应的问题
转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
- CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
- 子级用css float浮动 而父级div没高度不能自适应高度
子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...
- div高度不能自适应(子级使用float浮动,父级div高度不能自适应)
1.问题截图: 2.问题描述: 由于地址.公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不 ...
- 让一个父级div根据子级div高度而自适应高度
需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...
- 子级用css float浮动 而父级不能自适应高度解决方法
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...
- 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。
实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...
- 子级div相对于父级div位置不变
设置父级div为相对位置 设置子级div为绝对位置 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
随机推荐
- Mybatis-plus入门学习]
需要的数据库建表语句: #创建用户表 CREATE TABLE user ( id BIGINT(20) PRIMARY KEY NOT NULL COMMENT '主键', name VARCHAR ...
- Linux(CentOS)上,安装了Apache(httpd)后,其他的电脑无法访问的原因
今天试了下在虚拟机上利用CentOS系统的yum命令安装好了httpd(apache2.2),然后在windows系统下访问此虚拟机的ip地址,却访问不了. 因为前段时间有知道过iptable的限制, ...
- Ansible 自动化运维工具
Ansible 自动化运维工具 Ansible是什么? Ansible是一个"配置管理工具"也是一个"自动化运维工具" Ansible 作用: Ansible是 ...
- 跟着ALEX 学python day2 基础2 模块 数据类型 运算符 列表 元组 字典 字符串的常用操作
声明 : 文档内容学习于 http://www.cnblogs.com/xiaozhiqi/ 模块初始: Python的强大之处在于他有非常丰富和强大的标准库和第三方库,几乎你想实现的任何功能都有相 ...
- 解决chrome连接自建https服务器报“您的连接不是私密连接”问题
前一段时间,Chrome 突然显示出了“您的连接不是私密连接”,这下可难受了,大部分的网站打开都有问题. 找了各种方法,各种设置都是不行. 一.暴力.费力的方法直接卸载 Chrome ,删除一切数据以 ...
- 【使用篇二】SpringBoot服务端数据校验(8)
对于任何一个应用而言,客户端做的数据有效性验证都不是安全有效的,而数据验证又是一个企业级项目架构上最为基础的功能模块,这时候就要求我们在服务端接收到数据的时候也对数据的有效性进行验证.为什么这么说呢? ...
- Netty之ChannelHandler(三)
ChannelHandler是netty中的核心处理部分,我们使用netty的绝大部分代码都写在这部分,所以了解它的一些机制和特性是很有必要的. 一.Channel Channel接口抽象了底层soc ...
- LG2272/BZOJ1093 「ZJOI2007」最大半连通子图 Tarjan缩点+DAG求最长链
问题描述 LG2272 BZOJ1093 题解 观察半联通的定义,发现图中的一些结点,构成的链一定是一个半联通子图. 此时存在的环可能会干扰求解,于是\(\mathrm{Tarjan}\)缩点. 于是 ...
- 如何禁用Antimalware Service Executable
有时发现风扇呼呼地转,查看任务管理器,发现其中antimalware service executable占用了大量的CPU和内存. 这是由于Windows Defender软件导致的,可以用如下方法 ...
- 6-ESP8266 SDK开发基础入门篇--操作系统入门使用
了解了8266的串口了,这一节咱就自己写程序,处理一下数据,如果接收到 0xaa 0x55 0x01 就控制指示灯亮 0xaa 0x55 0x00 就控制指示灯灭 注意哈,我是用的假设没有操作系统 ...