title: How to compute getBoundingClientRect() in a scaled svg?
body: <p>I have a usecase where designers supply us with a SVG, and we use certain elements in that SVG to position our dynamically created elements.</p>
  <p>In the snippet below I try to overlap the rect#overlayTarget with the div#overlay using <code>getBoundingClientRect</code>: it doesn't take the scaling of the parent element into account, and the elements don't overlap.</p>
  <p>The answers from this question is not applicable here as it uses <code>element.offsetLeft</code> and <code>element.offsetTop</code>, which aren't available for SVG: <a href="https://stackoverflow.com/questions/27745438/how-to-compute-getboundingclientrect-without-considering-transforms">How to compute getBoundingClientRect() without considering transforms?</a></p>
  <p>How do I make the #overlay and #overlayTarget overlap?</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>const target = document.querySelector("#overlayTarget");
  const position = target.getBoundingClientRect();
  
  const overlay = document.querySelector("#overlay");
  overlay.style.top = `${position.y}px`;
  overlay.style.left = `${position.x}px`;
  overlay.style.width = `${position.width}px`;
  overlay.style.height = `${position.height}px`;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#overlay {
    position: absolute;
    background: hotpink;
    opacity: 0.3;
    width: 100px;
    height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="app" style="transform: scale(0.875);"&gt;
    Test
    &lt;div id="overlay"&gt;&lt;/div&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" width="1809" height="826" viewBox="0 0 809 826"&gt;
          &lt;g
            id="Main_overview"
            data-name="Main overview"
            transform="translate(-49.5 -155)"
          &gt;
            &lt;g
              id="overlayTarget"
              data-name="DC-DC converter"
              transform="translate(400 512)"
            &gt;
              &lt;rect
                id="Rectangle_29"
                data-name="Rectangle 29"
                width="74"
                height="74"
                fill="none"
                stroke="#47516c"
                stroke-width="2"
              /&gt;
            &lt;/g&gt;
          &lt;/g&gt;
        &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>