I do getBBox() on a group element and on a rect element. The group element and the rect element have the same position and sizes. The groups getBBox() always give x,y as 0,0, while the rect gives its actual position in the outer group. Why is that so? Should the group element's getBBox() not just give back its bounds inside its parent element, as the rect element does? The following html prints the following to the console:

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/>

var superg = d3.select("#canvasHolder").append("svg").attr("width", 800).attr("height", 400)
               .append("g").attr("id", "superg")
    
superg.append("rect").attr("width", 800).attr("height", 400).style("fill", "blue").style("fill-opacity", 0.2)
superg.append("rect").attr("width", 100).attr("height", 100).style("fill", "red").style("fill-opacity", 0.2).attr("id", "rect").attr("x", 100).attr("y", 200)
    
superg.append("g").attr("transform", "translate(100, 200)").attr("id", "g")
      .append("rect").attr("cx", 0).attr("cy", 0).attr("width", 100).attr("height", 100)
    
console.log(d3.select("#superg").node().getBBox())
console.log(d3.select("#g").node().getBBox())
console.log(d3.select("#rect").node().getBBox())

<script src=".4.11/d3.min.js"></script>
<div id="canvasHolder"></div>

I do getBBox() on a group element and on a rect element. The group element and the rect element have the same position and sizes. The groups getBBox() always give x,y as 0,0, while the rect gives its actual position in the outer group. Why is that so? Should the group element's getBBox() not just give back its bounds inside its parent element, as the rect element does? The following html prints the following to the console:

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/>

var superg = d3.select("#canvasHolder").append("svg").attr("width", 800).attr("height", 400)
               .append("g").attr("id", "superg")
    
superg.append("rect").attr("width", 800).attr("height", 400).style("fill", "blue").style("fill-opacity", 0.2)
superg.append("rect").attr("width", 100).attr("height", 100).style("fill", "red").style("fill-opacity", 0.2).attr("id", "rect").attr("x", 100).attr("y", 200)
    
superg.append("g").attr("transform", "translate(100, 200)").attr("id", "g")
      .append("rect").attr("cx", 0).attr("cy", 0).attr("width", 100).attr("height", 100)
    
console.log(d3.select("#superg").node().getBBox())
console.log(d3.select("#g").node().getBBox())
console.log(d3.select("#rect").node().getBBox())

<script src="https://cdnjs.cloudflare./ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="canvasHolder"></div>

I would have thought that the group element should have as x and y values the same as the rect element. Why is this not so?

• javascript
• svg
• bounding-box

1 Answer 1

We need to look at the generated SVG to find the answer. I'm going to concentrate on the inner <g id="g"> and strip out the rest.

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

The bounding rect values you get back from calling getBBox() on an element does not include the effect of any transform attribute on that element. It is calculated from the bounding boxes of its children only.

See: the definition of getBBox() in the SVG 1.1 spec

So calling getBBox() on the group only includes the dimensions of its <rect> child, hence (0, 0, 100, 100). But the <rect> is affected by the transform provided by it's parent, so you get (100, 200, 100, 100) when you get the bbox of that.