Nested SVG's width height set in % not working in chrome or edge

问题

<div>
        <div style="width:200px;height:70px">
            <div style="width:100%;height:100%;">
                <svg id="svg1" width="100%" height="90%">
                    <rect height="100%" width="100%" fill="#00001a"></rect>
                    <svg id="svg2" width="90%" height="10%" x="10%">
                        <rect height="100%" width="100%" fill="#ff4d4d"></rect>
                    </svg>
                    <svg id="svg3" width="90%" height="90%" x="10%" y="10%">
                        <rect height="100%" width="100%" fill="#ff4d4d"></rect>
                        <line x1="0%" x2="2700px" y1="25%" y2="25%" stroke="#aa001a"/>
                    </svg>
                    <svg id="svg4" width="10%" height="90%" y="10%">
                        <rect height="100%" width="100%" fill="#ff4d4d"></rect>
                    </svg>
                </svg>
            </div>
        </div>
    </div>

I have some svg's i want to set the size of relative to their parent svg. I have set the size properties using height%/width% inline, and this works perfectly in firefox. Here's a simplified example of the code-structure that is rendered in both chrome and firefox(identical as-read), this code works as expected in chrome if you just open it in an html file:

    <div>
        <div style="width:200px;height:70px">
            <div style="width:100%;height:100%;">
                <svg id="svg1" width="100%" height="90%">
                    <rect height="100%" width="100%" fill="#00001a"></rect>
                    <svg id="svg2" width="90%" height="10%" x="10%">
                        <rect height="100%" width="100%" fill="#ff4d4d"></rect>
                    </svg>
                    <svg id="svg3" width="90%" height="90%" x="10%" y="10%">
                        <rect height="100%" width="100%" fill="#ff4d4d"></rect>
                    </svg>
                    <svg id="svg4" width="10%" height="90%" y="10%">
                        <rect height="100%" width="100%" fill="#ff4d4d"></rect>
                    </svg>
                </svg>
            </div>
        </div>
    </div>

However, when i run my project in chrome and edge it respects #svg3's x and y values, but the size is set a lot bigger, even bigger than body. The rect inside svg3 works as expected(only filling the given % size). I found these two questions:

SVG translate seems to behave different in Chrome/Chromium

nested svg ignores transformation in Chrome and Opera

They refer to transformations, not setting size. The weird part is that the rect inside svg3 only fills the space given(as expected), but the size of the actual svg when you inspect it is a lot bigger. I am using vuejs, but since the code that is rendered in the browser is as expected, and it works as intended in firefox i believe the problem isn't with vuejs.

Any help/tips would be appreciated.

EDIT: I maybe could have stated it better but the code above runs fine for me(in chrome as well). The structure of the code is the same as when i inspect the original code in chrome. Here is an album of images showing what i am seeing in my project. The first and the last images are probably most important because it shows the rect with 100% width and height being correctly sized but the last image shows that the svg element is larger than that area. https://imgur.com/a/ozJqEgB

EDIT 2: I was able to find out what was causing my issues, it was a pretty simple mistake on my part where i had svg elements that we're being written bigger than the svg itself. Here is a edited version of the last example:

    <div>
        <div style="width:200px;height:70px">
            <div style="width:100%;height:100%;">
                <svg id="svg1" width="100%" height="90%">
                    <rect height="100%" width="100%" fill="#00001a"></rect>
                    <svg id="svg2" width="90%" height="10%" x="10%">
                        <rect height="100%" width="100%" fill="#ff4d4d"></rect>
                    </svg>
                    <svg id="svg3" width="90%" height="90%" x="10%" y="10%">
                        <rect height="100%" width="100%" fill="#ff4d4d"></rect>
                        <line x1="0%" x2="500px" y1="25%" y2="25%" stroke="#236ce0" />
                        <line x1="50%" x2="50%" y1="0%" y2="500px" stroke="#236ce0" />
                    </svg>
                    <svg id="svg4" width="10%" height="90%" y="10%">
                        <rect height="100%" width="100%" fill="#ff4d4d"></rect>
                    </svg>
                </svg>
            </div>
        </div>
    </div>

If you open this code in chrome/edge svg3 is a 500px by 500px square, while in firefox it is 180px by 56,7px. Is this inconsistency expected? This is a problem if you wan't to have click events that are relative to the SVG, as the size and top/left margins aren't the same across browsers.

来源：https://stackoverflow.com/questions/52876222/nested-svgs-width-height-set-in-not-working-in-chrome-or-edge