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 = 0; index < svg.length; index++) {
            svg[index].setAttribute("viewBox", "0,0,"+svg[index].getBBox().width+","+svg[index].getBBox().height+"")
        }
    }

 

     

标签：index,父级,SVG,轴数,height,svg,DIV,viewBox
来源： https://www.cnblogs.com/huzhuhua/p/12054173.html