How to compute getBoundingClientRect() in a scaled svg?

Question

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.

In the snippet below I try to overlap the rect#overlayTarget with the div#overlay using getBoundingClientRect: it doesn't take the scaling of the parent element into account, and the elements don't overlap.

The answers from this question is not applicable here as it uses element.offsetLeft and element.offsetTop, which aren't available for SVG: How to compute getBoundingClientRect() without considering transforms?

How do I make the #overlay and #overlayTarget overlap?

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

#overlay {
  position: absolute;
  background: hotpink;
  opacity: 0.3;
  width: 100px;
  height: 100px;
}

<div id="app" style="transform: scale(0.875);">
  Test
  <div id="overlay"></div>
  <svg xmlns="http://www.w3.org/2000/svg" width="1809" height="826" viewBox="0 0 809 826">
        <g
          id="Main_overview"
          data-name="Main overview"
          transform="translate(-49.5 -155)"
        >
          <g
            id="overlayTarget"
            data-name="DC-DC converter"
            transform="translate(400 512)"
          >
            <rect
              id="Rectangle_29"
              data-name="Rectangle 29"
              width="74"
              height="74"
              fill="none"
              stroke="#47516c"
              stroke-width="2"
            />
          </g>
        </g>
      </svg>
</div>

Answer 1

If you cannot set your overlay element outside of the transformed element, this answer will work, but only for some simple transformations:

• translations and
• scales with factors > 0

In these cases, the corners of the bounding box aren't moved out of their top/left and bottom/right orientation. Rotations or skews, and most of the 3D transforms won'T work out.

You can then compute the resulting box values for your overlay by transforming the corners of position with the inverse matrix to that set for the #app element. The DOMPoint and DOMMatrix interfaces help with that.

It is important to remember that transform sets an implicit position: relative, so the top and left values of the overlay are not in relation to the viewport.

const app = document.querySelector('#app');
const relative = app.getBoundingClientRect();

const target = document.querySelector("#overlayTarget");
const position = target.getBoundingClientRect();

const matrix = new DOMMatrix(app.style.transform).inverse();

const topleft = new DOMPoint(
     position.x - relative.x,
     position.y - relative.y
).matrixTransform(matrix);
const bottomright = new DOMPoint(
    position.x - relative.x + position.width,
    position.y - relative.y + position.height
).matrixTransform(matrix);

const overlay = document.querySelector("#overlay");
overlay.style.top = `${topleft.y}px`;
overlay.style.left = `${topleft.x}px`;
overlay.style.width = `${bottomright.x - topleft.x}px`;
overlay.style.height = `${bottomright.y - topleft.y}px`;

#overlay {
  position: absolute;
  background: hotpink;
  opacity: 0.3;
  width: 100px;
  height: 100px;
}

<div id="app" style="transform: scale(0.875);">
  Test
  <div id="overlay"></div>
  <svg xmlns="http://www.w3.org/2000/svg" width="1809" height="826" viewBox="0 0 809 826">
        <g
          id="Main_overview"
          data-name="Main overview"
          transform="translate(-49.5 -155)"
        >
          <g
            id="overlayTarget"
            data-name="DC-DC converter"
            transform="translate(400 512)"
          >
            <rect
              id="Rectangle_29"
              data-name="Rectangle 29"
              width="74"
              height="74"
              fill="none"
              stroke="#47516c"
              stroke-width="2"
            />
          </g>
        </g>
      </svg>
</div>