title: Get absolute coordinates of element inside SVG using JS
body: <p>Good time forum users. I apologize in advance for my English. I could not find the answer (I decided to ask the English-speaking audience).</p>
  
  <p>Absolute positioning (coordinates) of an element nested in groups relative to the parent container ().</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-html lang-html prettyprint-override"><code>&lt;svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMin slice" x="0" y="0" tabindex="1"&gt;
    &lt;g transform="translate(100 100)"&gt;
         &lt;g transform="translate(100 100)"&gt; 
              &lt;circle r="50" cx="25" cy="25" fill="yellow" /&gt;
         &lt;/g&gt;
    &lt;/g&gt;
  &lt;svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to get using ES6 + circle coordinates relative to SVG. That is x = 100 + 100 + 25, y = 100 + 100 + 25 for .</p>
  
  <p>How can I get these coordinates? (can be up to an infinite nesting of groups). Thanks for helping.</p>
  
  <p><a href="https://i.stack.imgur.com/P74YS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P74YS.png" alt="enter image description here"></a></p>