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

Share Improve this question Follow edited Jan 9, 2018 at 6:30 ekad 14.6k2626 gold badges4646 silver badges4848 bronze badges asked Aug 30, 2016 at 21:15 j18434j18434 7922 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.