html - Firefox getBoundingClientRect() 不考虑转换

Question

我正在向我的网页添加一些 SVG 路径，但在使用 Firefox 43.0 时遇到问题。看来，当我将 transform: scale(0.1) 应用于我的路径时，Firefox 不会更新边界客户端矩形(通过 getBoundingClientRect())

这是转换前我的 Path 的屏幕截图，以及正确的边界矩形:

这里是应用了变换，视觉效果清晰地位于边界框之外:

相比之下，Chrome 正在按预期更新其边界框。 (注意受限的比例。)

这个问题在 Chrome 或 Edge 上都不存在。我确实找到了 this old bug from 2012其中表示问题已在 12.0 版中修复，文档说明:

Starting from Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), the effect of CSS transforms is considered when computing the element's bounding rectangle.

...这似乎不是真的。对于其他浏览器，我将我的圆圈缩小到其原始大小的 10%，然后计算与客户端矩形的坐标偏移，使其在其原始 100% 比例位置上居中。然而，由于客户端矩形在 Firefox 中转换后没有更新，所以它打乱了计算。

我该如何解决 Firefox 的这个问题？

Answer 1

可以通过属性设置转换，例如

<path transform="scale(0.1)" d="..."/>

或您正在做的 CSS。使用 CSS 是较新的方法； SVG 1.1 规范仅指定属性转换。

getBoundingClientRect doesn't take CSS transforms into account目前在 Firefox 上，但它确实考虑了转换属性。