Javascript group元素的SVG getBBox（）给出了与具有相同大小和位置的rect元素不同的结果_Javascript_Svg_Bounding Box

Javascript group元素的SVG getBBox（）给出了与具有相同大小和位置的rect元素不同的结果

javascript svg

Javascript group元素的SVG getBBox（）给出了与具有相同大小和位置的rect元素不同的结果,javascript,svg,bounding-box,Javascript,Svg,Bounding Box,我对group元素和rect元素执行getBBox（）。group元素和rect元素具有相同的位置和大小。组getBBox（）总是将x，y表示为0,0，而rect表示其在外部组中的实际位置。为什么会这样？group元素的getBBox（）是否应该像rect元素那样只返回其父元素内的边界？以下html将以下内容打印到控制台： SVGRect { x: 0, y: 0, width: 800, height: 400}<br/> SVGRect { x: 0, y: 0, width:

我对group元素和rect元素执行getBBox（）。group元素和rect元素具有相同的位置和大小。组getBBox（）总是将x，y表示为0,0，而rect表示其在外部组中的实际位置。为什么会这样？group元素的getBBox（）是否应该像rect元素那样只返回其父元素内的边界？以下html将以下内容打印到控制台：

SVGRect { x: 0, y: 0, width: 800, height: 400}<br/>
SVGRect { x: 0, y: 0, width: 100, height: 100}<br/>
SVGRect { x: 100, y: 200, width: 100, height: 100}<br/>

我们需要查看生成的SVG以找到答案。我将集中精力于内部

，去掉其余部分

<g transform="translate(100, 200)" id="g">
  <rect cx="0" cy="0" width="100" height="100"></rect>
</g>

在元素上调用
getBBox（）
返回的边界rect值不包括该元素上任何
转换
属性的效果。它仅从其子对象的边界框计算

见：

因此，对组调用

getBBox（）

只包括其

子级的维度，因此（0，0，100，100）。但是

受其父级提供的转换的影响，因此当您获得该转换的bbox时，您会得到（100200100100）。