title: BBox calculation of svg <g> elements
body: <p>I just came across a weired case of bouncing box calculation and it seems I did not grasp the whole truth yet.</p>
  
  <p>First of all, a bounding box is defined as the tightest box, an <strong>untransformed</strong> element can be enclosed with.</p>
  
  <p>I always was under the impression, that for groups, that means, that it gets basically the union of the bounding box of all children.</p>
  
  <p>However, today I came across this:</p>
  
  <pre><code>&lt;g id="outer"&gt;
    &lt;g id="inner" transform="translate(100, 100)"&gt;
      &lt;rect x="0" y="0" width="100" height="100" /&gt;
    &lt;/g&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>The bounding boxes of the elements are as follows:</p>
  
  <ul>
  <li><code>rect:   x: 0,   y: 0,   w: 100, h: 100</code></li>
  <li><code>#inner: x: 0,   y: 0,   w: 100, h: 100</code></li>
  <li><code>#outer: x: 100, y: 100, w: 100, h: 100</code></li>
  </ul>
  
  <p>My expectation would have been, that all boxes are the same but as you can see, the outer box is NOT the union of the inner elements (in that case it would equal the #inner's bbox). Instead it takes into account the transformation of the inner elements.</p>
  
  <p>So, is it right to say, that the bbox of a group is the union of the <strong>TRANSFORMED</strong> bbox's of its children? Or more programatically said, the union of all <code>getBoundingClientRect</code> calls (assuming that scroll is 0 because <code>getCoundingClientRect</code> ignores scroll)?</p>
  
  <p>I would really appreciate a <strong>link</strong> pointing me to the correct part of the specs.</p>