Question

如果svg-dom元素的内部元素较大或设置为其他位置，我会遇到一些问题，即svg-dom元素的大小大于给定的大小。我做了一个js小提琴，您可以在其中复制它。只需检查一下并检查svg3的大小即可。如果您在chrome中将其设置为500px x 500px，在Firefox中则将其设置为svg的给定大小。这是小提琴：https://jsfiddle.net/w1gftej0/17/ 这是代码：

   <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表现得像firefox？我的确意识到，如果svg中的所有元素都较小，则此问题不存在。但是，对于我正在处理的应用程序，如果由于某些原因svg元素较大，这将完全破坏功能。（我正在使用getBoundingClientRect来计算鼠标位置）。我想知道如何处理此问题的任何提示。

这是我两个月前问到的一个问题的后续行动：Nested SVG's width height set in % not working in chrome or edge

编辑：

可能是一个错误，在这里报告了该错误：https://bugs.chromium.org/p/chromium/issues/detail?id=914324

对于Chrome中的嵌套SVG，getBoundingClientRect（）返回错误的值

0 个答案: