后台返回过来的是这样的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. RegxUtils正则表达式工具类

    public class RegxUtils { //------------------常量定义 /** * Email正则表达式="^([a-z0-9A-Z]+[-|\\.]?)+[a- ...

  2. Ubuntu16.04安装flume

    参考:https://www.cnblogs.com/soyo/p/7686702.html

  3. ESA2GJK1DH1K升级篇: STM32远程乒乓升级,基于(Wi-Fi模块AT指令TCP透传方式),MQTT通信控制升级

    实现功能概要 前面的版本都是,定时访问云端的程序版本,如果版本不一致,然后下载最新的升级文件,实现升级. 这一节,在用户程序里面加入MQTT通信,执行用户程序的时候,通过接收MQTT的升级命令实现升级 ...

  4. Emacs奇技淫巧

    奇技快捷键 C-t: 交换两个字符的位置 M-t: 交换两个字符的位置 C-x, C-t: 则是交换两行的位置 C-x, h: 全选 M-/: 匹配这个首字母的单词 M-c: 将下一个单词开头大写, ...

  5. 11/7 <Dynamic Programming>

    62. Unique Paths 方法一: 二位数组 而这道题是每次可以向下走或者向右走,求到达最右下角的所有不同走法的个数.那么跟爬梯子问题一样,需要用动态规划 Dynamic Programmin ...

  6. Zabbix设置邮件报警

    邮件报警 概述当监控项收集了数据后,触发器会根据异常状态触发报警.根据一些报警机制,它也会通知我们一些重要的事件,而不需要我们直接在Zabbix前端进行查看.这就是通知(Notifications)的 ...

  7. [LeetCode] 374. Guess Number Higher or Lower 猜数字大小

    We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...

  8. Spring security 知识笔记【自定义登录页面】

    一.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  9. 微信小程序如何进行本地调试

    1.下载并使用微信开发者工具 2.将项目导入工具 3.在项目中修改请求http地址 4.在工具上点击“测试号”,跳转到测试号管理界面设置request合法域名. 注意这里输入的测试域名要和上一步相同. ...

  10. 慕课网springboot博客系统开发(一)----spring initializr的使用 gradle构建项目

    spring initializr工具的地址:https://start.spring.io/:通过它可以很方便的创建springboot项目 这里我们选择使用gradle作为项目的构建工具,此spr ...