对父 g 元素应用变换后，子元素上的 Snap.svg 边界框未更新答案

【问题标题】：Snap.svg bounding box not updated on child elements after applying transform to parent g element对父 g 元素应用变换后，子元素上的 Snap.svg 边界框未更新
【发布时间】：2014-02-03 17:28:36
【问题描述】：

Codepen：http://codepen.io/anon/pen/dfIBv

我在 g 元素中有两个矩形，我在其上应用了变换。 GetBBox 方法在变换前后显示相同的数字。

如果我直接在这些矩形上应用相同的变换，getBBox 方法会显示正确的测量值。

在对父组元素应用变换后，有什么方法可以“正确”测量这些矩形？

谢谢！

【问题讨论】：

你试过 element.node.getBoundingClientRect() 吗？我认为原件是正确的，只是它们与当前的转换有关。我认为 getBoundingClientRect 可能会考虑到这些。

标签： javascript svg snap.svg

【解决方案1】：

伊恩是正确的。 element.node.getBoundingClientRect() 显示正确的测量值。谢谢你:)

【讨论】：

变换后的元素应该有一个matrix属性，其中matrix.e表示x-offset，matrix.f表示y-offset。您还可以使用这些值来计算元素的正确位置。