BBox计算svg <g>元素

Question

我刚刚遇到了一个弹跳箱计算的问题,似乎我还没有掌握全部真相.

首先,边界框被定义为最紧密的框,未转换的元素可以被包围.

我总是在印象中,对于团体而言,这意味着它基本上得到了所有孩子的边界框的联合.

但是,今天我遇到了这个:

<g id="outer">
  <g id="inner" transform="translate(100, 100)">
    <rect x="0" y="0" width="100" height="100" />
  </g>
</g>

元素的边界框如下:

• rect: x: 0, y: 0, w: 100, h: 100
• #inner: x: 0, y: 0, w: 100, h: 100
• #outer: x: 100, y: 100, w: 100, h: 100

我的期望是,所有的盒子都是相同的,但正如你所看到的,外盒不是内部元素的结合(在这种情况下,它将等于#inner的bbox).相反,它考虑了内部元素的转换.

那么,说一个组的bbox是其孩子的TRANSFORMED bbox的联盟是对的吗？或者更编程地说,所有getBoundingClientRect调用的并集(假设滚动为0因为getCoundingClientRect忽略滚动)？

我真的很感激链接指向我的规格的正确部分.

Answer 1

getBBox返回的边界框是元素变换坐标系中的框

返回当前用户空间中的紧束缚框(即,在应用'transform'属性后,如果有的话)在所有包含的图形元素的几何上,不包括描边,剪切,遮罩和滤镜效果)...

外部SVG元件具有不同的坐标系.也就是说它放置原点与内部<g>元素不同,因为内部元素的变换.

然而,getBoundingClientRect在全局坐标系中运行.