Calculating the Bounding Box of SVG Group Elements

Question

Calculating the Bounding Box of SVG Group Elements

Today I encountered a puzzling scenario involving bounding box calculations, and it seems that I have yet to fully understand the situation.

To clarify, a bounding box is described as the smallest box in which an untransformed element can fit within.

I had always believed that for groups of elements, this meant obtaining the combined bounding box of all children.

However, what I found today was unexpected:

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

The bounding boxes of these elements are as follows:

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

I expected all boxes to be identical, but clearly that is not the case. The outer box does not simply encompass the inner elements (which would have been the #inner's bbox). Instead, it takes into consideration the transformation applied to the inner elements.

Therefore, can it be concluded that the bbox of a group is essentially the union of the TRANSFORMED bboxes of its children? Or more precisely, the combination of all getBoundingClientRect calls (assuming scroll is disregarded since getCoundingClientRect ignores scroll)?

I would greatly appreciate a reference directing me to the specific section of the specifications regarding this matter.

javascript svg bounding-box getboundingclientrect

Answer 1

Answer №1

The getBBox function returns the bounding box based on the element's transformed coordinate system.

It calculates the tight bounding box in the current user space, taking into account any transformations applied to the elements within it.

Keep in mind that the outer SVG element uses a different coordinate system than the inner elements due to their transforms.

On the other hand, getBoundingClientRect works with the global coordinate system.

Answer 2

The getBBox function returns the bounding box based on the element's transformed coordinate system.

It calculates the tight bounding box in the current user space, taking into account any transformations applied to the elements within it.

Keep in mind that the outer SVG element uses a different coordinate system than the inner elements due to their transforms.

On the other hand, getBoundingClientRect works with the global coordinate system.

Answer 3

Answer №2

Experience the visual representation of the #outer BBox in action as it rotates in this demonstration.

const SVG_NS = 'http://www.w3.org/2000/svg';
let o = outer.getBBox()
let i = inner.getBBox()

let BBpoly = drawBBox(o); 



function drawBBox(bb){
  let p = [{x:bb.x,y:bb.y},
           {x:bb.x+bb.width,y:bb.y},
           {x:bb.x+bb.width,y:bb.y+bb.height},
           {x:bb.x,y:bb.y+bb.height}];
  let BBpoly = drawPolygon(p, BBoxes);
  return BBpoly;
}


function drawPolygon(p, parent) {
  let poly = document.createElementNS(SVG_NS, 'polygon');
  let ry = [];
  for (var i = 0; i < p.length; i++) {
    ry.push(String(p[i].x + ", " + p[i].y));
  }
  var points = ry.join(" ");
  poly.setAttributeNS(null, 'points', points);

  parent.appendChild(poly);
  return poly;
}


function updatePolygon(p,poly){
  let ry = [];
  for (var i = 0; i < p.length; i++) {
    ry.push(String(p[i].x + ", " + p[i].y));
  }
  var points = ry.join(" ");
  poly.setAttributeNS(null, 'points', points);
}

let a = 0;
function Frame(){
  requestAnimationFrame(Frame);
  inner.setAttributeNS(null,"transform", `rotate(${a}, 120,120)`)
  let bb = outer.getBBox()
  let p = [{x:bb.x,y:bb.y},
           {x:bb.x+bb.width,y:bb.y},
           {x:bb.x+bb.width,y:bb.y+bb.height},
           {x:bb.x,y:bb.y+bb.height}];
  updatePolygon(p,BBpoly);
  
  a++
}

Frame()

svg{border:1px solid; width:300px;}
polygon{fill:none; stroke:red; }

<svg viewBox="0 0 250 250">
  <g id="BBoxes"></g>
  <g id="outer">
  <g id="inner">
    <rect x="70" y="70" width="100" height="100"  />
  </g>
</g>
</svg>

Answer 4

Experience the visual representation of the #outer BBox in action as it rotates in this demonstration.

const SVG_NS = 'http://www.w3.org/2000/svg';
let o = outer.getBBox()
let i = inner.getBBox()

let BBpoly = drawBBox(o); 



function drawBBox(bb){
  let p = [{x:bb.x,y:bb.y},
           {x:bb.x+bb.width,y:bb.y},
           {x:bb.x+bb.width,y:bb.y+bb.height},
           {x:bb.x,y:bb.y+bb.height}];
  let BBpoly = drawPolygon(p, BBoxes);
  return BBpoly;
}


function drawPolygon(p, parent) {
  let poly = document.createElementNS(SVG_NS, 'polygon');
  let ry = [];
  for (var i = 0; i < p.length; i++) {
    ry.push(String(p[i].x + ", " + p[i].y));
  }
  var points = ry.join(" ");
  poly.setAttributeNS(null, 'points', points);

  parent.appendChild(poly);
  return poly;
}


function updatePolygon(p,poly){
  let ry = [];
  for (var i = 0; i < p.length; i++) {
    ry.push(String(p[i].x + ", " + p[i].y));
  }
  var points = ry.join(" ");
  poly.setAttributeNS(null, 'points', points);
}

let a = 0;
function Frame(){
  requestAnimationFrame(Frame);
  inner.setAttributeNS(null,"transform", `rotate(${a}, 120,120)`)
  let bb = outer.getBBox()
  let p = [{x:bb.x,y:bb.y},
           {x:bb.x+bb.width,y:bb.y},
           {x:bb.x+bb.width,y:bb.y+bb.height},
           {x:bb.x,y:bb.y+bb.height}];
  updatePolygon(p,BBpoly);
  
  a++
}

Frame()

svg{border:1px solid; width:300px;}
polygon{fill:none; stroke:red; }

<svg viewBox="0 0 250 250">
  <g id="BBoxes"></g>
  <g id="outer">
  <g id="inner">
    <rect x="70" y="70" width="100" height="100"  />
  </g>
</g>
</svg>

Calculating the Bounding Box of SVG Group Elements

Answer №1

Answer №2

Similar questions

What are the potential drawbacks of combining the useState hook with Context API in React.js?

Issues with Angular JS page loading when utilizing session and local storage in Google Chrome

Dealing with the issue of asynchronous operations in a controller using async/await function

Reduce and combine JavaScript files without the need for Grunt or Gulp

Is it possible for a function to alter the 'this' object in JavaScript?

Prevent a specific folder from being included in expressjs routing

Uniting 2 streams to create a single observable

Issue with clientHeight not functioning properly with line breaks in Angular 2 application after ngAfterViewInit

Issue TS7053 occurs when trying to access any index of the target of a React.FormEvent<HTMLFormElement>

What is the best way to convert a circular JSON object to a string

The response from the $http POST request is not returning the expected

I'm encountering a strange issue where Node JS is mistakenly claiming that the method doesn't exist, even though

The re-rendering of a functional component utilizing React.useCallback and React.memo() is occurring

What is the process for enabling HLS.js to retrieve data from the server side?

Encountering a [$injector:modulerr] error while attempting to include modules in ZURB Foundation for Apps

jQuery Refuses to Perform Animation

Enable only the current week days on the multiple date picker feature

Issue with sending multiple files using FormData and axios in Vuex with Laravel. Server side consistently receiving null. Need help troubleshooting the problem

The daily scripture quote from the ourmanna.com API may occasionally fail to appear

Choose a procedure to reset to the original setting