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 ...
随机推荐
- 每天一套题打卡|河南省第九届ACM/ICPC
A 表达式求值 表达式求值:可以用递归求解,也可以用栈模拟,考过多次. 类似题目:NYOJ305,NYOJ35 用栈模拟做法: #include <stdio.h> #include &l ...
- 【Java】Spring
AnnotationConfigApplicationContext:从一个或多个基于Jav a的配置类中加载Spring应用上下文.AnnotationConfigWebApplicationCon ...
- python SSL 错误
python 使用pip 安装模块是提示SSL错误 出现该问题的原因由于系统的openssl是1.0.1的版本,对于python3.7太老了,需要更新为openssl1.0.2或者libressl2. ...
- Linux安装Gitlab服务器
1. 下载GitLab 下载地址:https://packages.gitlab.com/gitlab/gitlab-ce/packages/el/7/gitlab-ce-10.8.2-ce.0.el ...
- 团队冲刺--three
今天学习css,用css做登录界面. 昨天学习了爬虫了初步. 问题:爬虫很难.
- 【oracle】lpad函数 作用(填充)
- es6模块化规范
在 es6 之前是没有块这个概念的,es6zhong 引入:实际如下: 若 xx1 和 xx2 中有变量名相同,且引入在同一 html 下,需要为引入的 script 标签加上 type=“modul ...
- java 类的继承
package testpacknm; import java.util.Scanner; import testpacknm.testcnm; class Another { String name ...
- CF1187D Subarray Sorting(神奇思路,线段树)
说实话,$2200$ 的题做不出来也有点丢脸了…… 当然要先判所有数出现次数相同. 首先区间排序就相当于交换相邻两个数,前面的数要大于后面的数才能交换. 然后就不会了…… 我们考虑 $b_1$ 到 $ ...
- 基于arm的嵌入式QT开发(课程设计)
一. 项目要求 配置QT5.7基于x86及arm 等两种CPU架构的调试及开发环境: 移植arm编译后的QT5.7及屏幕校准工具tslib1.4至CORTEX ARM9实验平台: 开发基于QT5.7的 ...