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 ...
随机推荐
- css 文本属性和字体属性
1.将浮动居中 这需要三个盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 201871010123-吴丽丽 《面向对象程序设计(Java)》第八周学习总结
201871010123-吴丽丽<面向对象程序设计(Java)>第八周学习总结 项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ ...
- mac os下切换pip3国内源并安装requests库
在使用Python的时候,经常会用到pip来安装模块,但是默认的下载源实在是特别慢,经常install的时候还会因为速度的原因直接报错,因此我们可以选择将下载源更改为国内的,这样就可以提高我们的下载速 ...
- [Tkinter 教程12] 布局管理 (Pack Place Grid)
简介: 本文讲述如何使用 tkinter 的布局管理 (被称作 layout managers 或 geometry managers). tkinter 有三种布局管理方式: pack grid p ...
- web框架--tornado框架之模板引擎继承
使用模板的继承可以重复使用相同结构的模板, 可以大大减少代码量 入门实例 一.demo目录结构 注解: master.html为模板内容,被index.html,account.html引用 二.各文 ...
- Linux性能优化实战学习笔记:第四十六讲
一.上节回顾 不知不觉,我们已经学完了整个专栏的四大基础模块,即 CPU.内存.文件系统和磁盘 I/O.以及网络的性能分析和优化.相信你已经掌握了这些基础模块的基本分析.定位思路,并熟悉了相关的优化方 ...
- python总结九
1.sql语句: ,; 解释:由hire_date进行排序,降序desc,最大的就是最晚进来的员工,limit 如果是只有一个参数的话,那么说明是除了前面多少个数据, 如果后面有两个参数的话,那么就 ...
- Elasticsearch由浅入深(十一)索引管理
索引的基本操作 创建索引 PUT /{index} { "settings": {}, "mappings": { "properties" ...
- Python文件读写机制
Python提供了必要的函数和方法进行默认情况下的文件基本操作 文件打开方式: open(name[,mode[buf]]) name:文件路径 mode:打开方式 buf:缓冲buffering大小 ...
- Vagrant 安装Oracle19c RAC测试环境的简单学习
1. 学习自网站: https://xiaoyu.blog.csdn.net/article/details/103135158 简单学习了下 能够将oracle RAC开起来了 但是 对后期的维护和 ...