html - 嵌套 SVG 的宽度高度设置为 % 在 chrome 或 edge 中不起作用

Question

<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>

我有一些 svg，我想设置相对于其父 svg 的大小。我已经使用 height%/width% inline 设置了大小属性，这在 Firefox 中非常有效。这是在 chrome 和 firefox 中呈现的代码结构的简化示例（与读取相同），如果您只是在 html 文件中打开它，则此代码在 chrome 中按预期工作：

    <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>

但是，当我在 chrome 和 edge 中运行我的项目时，它尊重#svg3 的 x 和 y 值，但尺寸设置得更大，甚至比 body 更大。svg3 中的矩形按预期工作（仅填充给定的 % 大小）。我发现了这两个问题：

SVG 翻译似乎在 Chrome/Chromium 中表现不同

嵌套 svg 忽略 Chrome 和 Opera 中的转换

它们指的是转换，而不是设置大小。奇怪的是，svg3 中的 rect 只填充给定的空间（如预期的那样），但是当你检查它时实际 svg 的大小要大得多。我正在使用 vuejs，但由于在浏览器中呈现的代码符合预期，并且它在 Firefox 中按预期工作，我相信问题不在于 vuejs。

任何帮助/提示将不胜感激。

编辑：我也许可以说得更好，但上面的代码对我来说运行良好（在 chrome 中也是如此）。代码的结构与我在 chrome 中检查原始代码时的结构相同。这是一张图片专辑，展示了我在项目中看到的内容。第一张和最后一张图片可能是最重要的，因为它显示 100% 宽度和高度的矩形尺寸正确，但最后一张图片显示 svg 元素大于该区域。 https://imgur.com/a/ozJqEgB

编辑 2：我能够找出导致我的问题的原因，这是我的一个非常简单的错误，我有 svg 元素，我们写得比 svg 本身更大。这是最后一个示例的编辑版本：

    <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>

如果您在 chrome/edge 中打开此代码，则 svg3 是 500 像素 x 500 像素的正方形，而在 Firefox 中则是 180 像素 x 56.7 像素。这种不一致是预期的吗？如果您不希望有与 SVG 相关的点击事件，这是一个问题，因为不同浏览器的大小和顶部/左侧边距并不相同。

标签： htmlgoogle-chromesvgvue.jsmicrosoft-edge