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％内联设置了size属性，这在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中运行我的项目并使其边缘时，它会遵守＃svg3的x和y值，但是大小设置得更大，甚至大于主体。 svg3内部的rect可以按预期工作（仅填充给定的％大小）。我发现了两个问题：

SVG translate seems to behave different in Chrome/Chromium

nested svg ignores transformation in Chrome and 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为500px x 500px的正方形，而在firefox中为180px x 56,7px。是否会出现这种不一致？如果您不想拥有与SVG相关的点击事件，那么这将是一个问题，因为浏览器的大小和上/左页边距都不相同。

嵌套SVG的宽度高度（以％设置）不适用于chrome或edge

0 个答案: