Firefox getBoundingClientRect() 不考虑转换
Firefox getBoundingClientRect() does not account for transforms
我正在向我的网页添加一些 SVG 路径，但在使用 Firefox 43.0 时遇到问题。看来，当我将 transform: scale(0.1) 应用于我的路径时，Firefox 不会更新边界客户端矩形（通过 getBoundingClientRect()）
这是转换前我的路径的屏幕截图，以及正确的边界矩形：
这里是应用了变换，视觉效果清晰地位于边界框之外：
相比之下，这里 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 的这个问题？
可以通过属性设置转换，例如
<path transform="scale(0.1)" d="..."/>
或CSS如您所愿。使用 CSS 是较新的方法； SVG 1.1 规范仅指定属性转换。
getBoundingClientRect doesn't take CSS transforms into account 目前在 Firefox 上，但它确实考虑了转换属性。
我正在向我的网页添加一些 SVG 路径，但在使用 Firefox 43.0 时遇到问题。看来，当我将 transform: scale(0.1) 应用于我的路径时，Firefox 不会更新边界客户端矩形（通过 getBoundingClientRect()）
这是转换前我的路径的屏幕截图，以及正确的边界矩形：
这里是应用了变换，视觉效果清晰地位于边界框之外：
相比之下，这里 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 的这个问题？
可以通过属性设置转换，例如
<path transform="scale(0.1)" d="..."/>
或CSS如您所愿。使用 CSS 是较新的方法； SVG 1.1 规范仅指定属性转换。
getBoundingClientRect doesn't take CSS transforms into account 目前在 Firefox 上，但它确实考虑了转换属性。