As I understand it, getBBox() is supposed to ignore the transformations applied to the element it's measuring.

eg: if I have: <g transform="scale(0.5, 0.5)"><rect width="100" height="100" /></g>, calling getBBox on <g> will always return width: 100, height: 100, no matter what the scale() args are. However, this does NOT appear to be the case when using a <text> element instead of <rect>. The size of <text> reported by getBBox() changes as the transformation changes.

Full example:

const gNode = document.querySelector("g");

const dimensionsBB = () => {
  console.log(gNode.getBBox());
}

// trigger every time a change in size is detected
const resizeObserver = new ResizeObserver(dimensionsBB);

resizeObserver.observe(gNode);

// update transformation every second
setInterval(() => {
  gNode.setAttribute("transform", `scale(${Math.random()}, ${Math.random()})`);
}, 1000);

<svg width="500" height="500">
  <g>
    <text>Text goes here</text>
  </g>
 </svg>

In this example, the resizeObserver is triggered each time the scale changes, and the dimensions reported by getBBox() are different each time (with slight variations).

Why? And is there a way to always get a consistent result?