title: Access inline SVG's transformed group bounding box (x and y position, width and height)?
body: <p>Is there an "easy" DOM way to get a group's transformed position (center or origin) and bounding box (width, height)?</p>
  
  <p><code>&lt;g&gt;</code> as a logical container tag does not have geometric attributes aside from <code>transform</code>, which its children use.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let o = document.getElementById("o");
  let g = document.getElementById("g");
  
  o.textContent += "rect  x = " + r.x.baseVal.value + "\n";
  o.textContent += "group x = " + g.x.baseVal.value + "\n";  // TypeError: g.x is undefined</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg{background-color:#f3f3f3}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg viewBox="0 0 200 200" width="200"&gt;
  &lt;g id="g" transform="translate(100,100)" &gt;
    &lt;rect id="r" width="100" height="100" &gt;&lt;/rect&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  &lt;div id="o"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So it probably is required to iterate all children and calculate the sum of their bounding boxes (including transforms)?</p>
  
  <p><hr/>
  Edit:</p>
  
  <p>The following returns the group's bounding box <strong>without</strong> the transform:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let o = document.getElementById("o");
  let g = document.getElementById("g");
  
  o.textContent += "getBBox().x = " + r.getBBox().x + "\n";
  o.textContent += "getBBox().y = " + r.getBBox().y + "\n";
  o.textContent += "getBBox().width = " + r.getBBox().width + "\n";
  o.textContent += "getBBox().height = " + r.getBBox().height + "\n";</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg{background-color:#f3f3f3}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg viewBox="0 0 200 200" width="200"&gt;
  &lt;g id="g" transform="translate(100,100)" &gt;
    &lt;rect id="r" width="100" height="100" &gt;&lt;/rect&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  &lt;div id="o"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>