Firefox getBoundingClientRect（）不考虑转换

Question

我在网页上添加了一些SVG路径，但是我在使用Firefox 43.0时遇到了困难。当我将transform: scale(0.1)应用于我的路径时，Firefox似乎不会更新边界客户端矩形（通过getBoundingClientRect()）

这里是变换前路径的截图，以及正确的边界矩形：

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

相比之下，Chrome会按预期更新其边界框。 （注意约束比例。）

此问题在Chrome或Edge上都不存在。我确实发现this old bug from 2012表示问题已在版本12.0中修复，文档说明：

  

从Gecko 12.0（Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9）开始，在计算元素的边界矩形时会考虑CSS变换的效果。

......这似乎不是真的。对于其他浏览器，我将我的圆圈缩小到其原始大小的10％，然后计算客户端矩形的坐标偏移量，使其居中于原始的100％比例位置。但是，由于在Firefox中进行转换后客户端矩形没有更新，因此它会搞乱计算。

我如何解决这个问题？

Answer 1

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

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

你正在做的

或CSS。使用CSS是更新的方法; SVG 1.1规范仅指定属性转换。

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