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+"")
        }
    }