SVG跟随父级DIV自适应

后台返回过来的是这样的SVG标签

1<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 2 <g transform="translate(0 0)"> 3 <rect x="0" y="0" width="100%" height="100%" fill="#EBECEF" stroke="#4F5052" stroke-width="1" /> 4 <g transform="translate(586 0) rotate(90 0 0)"> 5 <path bid="1" d="M305 0L305 383.5C305 495.34 214.34 586 102.5 586L0 586L0 0L305 0" 6 fill="#FFFFFF" stroke="#4F5052" stroke-width="1" /> 7 </g> 8 </g> 9 </svg>

  刚开始怎么设置svg的width height 属性都是没有生产。。不能自适应。只看到 小一部分。

后来看到别人加上一个 viewBox="0,0,640,480",问题迎刃而解。。查了下。viewBox就是说用于SVG自适应的,四个值分别代表最小X轴数;最小y轴数;宽度;高度。

知道后可以动态添加OK了

1window.onload = function () { 2 let svg = document.getElementsByTagName('svg');for (let index = 0; index < svg.length; index++) { 3 svg[index].setAttribute("viewBox", "0,0,"+svg[index].getBBox().width+","+svg[index].getBBox().height+"") 4 } 5 }
点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

java反射, 不看你可别后悔

<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,

AndroidStudio封装SDK的那些事

<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael

Native memory allocation (mmap) failed to map xxx bytes for committing reserved memory

<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,