如何计算getBBox()SVGRect？

Question

我有一个g包含一个或多个path元素的元素.正如我在另一个问题中提到的,我g通过计算transform属性来缩放和转换元素,以便它适合画布另一部分的网格.

使用两个矩形之间的差异来完成计算,getBBox()即g元素和网格周围的矩形.

这是一个问题 - 在我进行转换之后,我更新g元素的内容并getBBox()再次调用,而不删除transform.生成的矩形似乎是在不考虑的情况下计算出来的transform.我原以为它会反映这种变化.这种行为是否与SVG规范一致？如何获取变换矩形的边界框？

BTW,这是在Firefox 4中运行的HTML 5文档,如果这有任何区别的话.

更新:显然这种行为似乎很明显违反了规范.从w3c的文字:

SVGRect getBBox()

返回当前用户空间中的紧束缚框(即,在应用'transform'属性后,如果有的话)在所有包含的图形元素的几何上,不包括描边,剪切,蒙版和滤镜效果).请注意,getBBox必须在调用方法时返回实际的边界框,即使元素尚未呈现.

我读得对吗？如果是这样,这似乎是Firefox使用的SVG实现中的勘误表; 我没有机会尝试任何其他的.如果有人能指出我在哪里,我会提交错误报告.

Answer 1

人们常常对getBBox和getBoundingClientRect的行为差异感到困惑.

getBBox是一个SVG Element的本机方法,相当于查找HTML DOM元素的offset/clientwidth.即使元素旋转,宽度和高度也不会改变.它不能用于HTML DOM元素.

getBoundingClientRect对于HTML和SVG元素都是通用的.当元素旋转或更多元素分组时,有界矩形的宽度和高度将发生变化.

Answer 2

您看到的行为是正确的,并且与规范一致.应用变换,然后以"当前用户单位"(即当前用户空间)计算bbox.因此,如果要查看元素转换的结果,则需要查看父节点或类似节点的bbox.这有点令人困惑,但在SVG Tiny 1.2规范中对SVGLocatable进行了更好的解释. 它包含了许多示例,阐明了它应该做什么.

Answer 3

至少有2种简单但有点hacky的方法来做你所要求的......如果有更好的(不那么黑客)的方式,我还没有找到它们

EASY HACKy#1:
a)设置一个矩形,匹配group.getBBox()返回
的"未转换" bbox b)将组的"未应用转换"应用于该
矩阵c)rect.getBBox()现在应该返回bbox您正在寻找

EASY HACKY#2 :(仅在chrome中测试)
a)使用element.getBoundingClientRect(),它返回足够的信息来构建你正在寻找的bbox