后台返回过来的是这样的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自适应的更多相关文章

  1. <转载>如何解决子级用float浮动父级div高度不能自适应的问题

    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...

  2. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  3. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  4. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  5. div高度不能自适应(子级使用float浮动,父级div高度不能自适应)

    1.问题截图: 2.问题描述: 由于地址.公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不 ...

  6. 让一个父级div根据子级div高度而自适应高度

    需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...

  7. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  8. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

  9. 子级div相对于父级div位置不变

    设置父级div为相对位置 设置子级div为绝对位置 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

随机推荐

  1. lf 前后端分离 (2) 课程数据获取,Serializer的返回

    一.关于课程数据的返回 在进行前后端分离时,会通过def 进行前后端传值, 本质上遵循rest 网址规范  增删改查查 get,post,put,del get(\d+) 1.在从数据库获取数据后,进 ...

  2. V4l2初识(七)-----------浅析app获取虚拟摄像头数据的过程

    继续分析数据的获取过程: 1.请求分配的缓冲区: ioctl(4,VIDIOC_REQBUFS) vidioc_reqbufs 2.查询和映射缓冲区   ioctl(4,VIDIOC_QUERYBUF ...

  3. Python Treelib 多叉树 数据结构 中文使用帮助文档

    树,对于计算机编程语言来说是一个重要的数据结构.它具有广泛的应用,比如文件系统的分层数据结构和机器学习中的一些算法.这里创建了treelib来提供Python中树数据结构的高效实现. 官方文档:htt ...

  4. 201871010135 张玉晶《面向对象程序设计(java)》第十五周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/zyja/p/12000 ...

  5. VIJOS-P1625 精卫填海

    JDOJ 1587 VIJOS-P1625 精卫填海 https://neooj.com/oldoj/problem.php?id=1587 洛谷 P1510 精卫填海 https://www.luo ...

  6. LG3004 「USACO2010DEC」Treasure Chest 区间DP+滚动数组优化

    问题描述 LG3004 题解 把拿走的过程反向,看做添加的过程,于是很显然的区间DP模型. 设\(opt_{i,j}\)代表区间\([i,j]\)中Bessie可以获得的最大值,显然有 \[opt_{ ...

  7. HttpRequestMessage扩展方法

    public static class HttpRequestMessageExtensions { /// <summary> /// Gets the <see cref=&qu ...

  8. AutoResetEvent介绍及使用场景

    AutoResetEvent 允许线程通过发信号互相通信.通常,此通信涉及线程需要独占访问的资源. 线程通过调用 AutoResetEvent 上的 WaitOne 来等待信号.如果 AutoRese ...

  9. Java的十三个设计模式

    OOP三大基本特性 封装 封装,也就是把客观事物封装成抽象的类,并且类可以把自己的属性和方法只让可信的类操作,对不可信的进行信息隐藏. 继承 继承是指这样一种能力,它可以使用现有的类的所有功能,并在无 ...

  10. 在树莓派上配置MariaDB

    在树莓派上配置MariaDB 前言 MariaDB是由原本开发MySQL的一些原始开发者领导,他们担心Oracle收购MySQL后会有一些隐患.MariaDB与MySQL保持这高度兼容性,并使用了一个 ...