Según tengo entendido, se supone que getBBox() ignora las transformaciones aplicadas al elemento que está midiendo.

por ejemplo: si tengo: <g transform="scale(0.5, 0.5)"><rect width="100" height="100" /></g> , llamar a getBBox en <g> siempre devolverá width: 100, height: 100 , sin importar cuáles sean los argumentos de la scale() . Sin embargo, este NO parece ser el caso cuando se usa un elemento <text> en lugar de <rect> . El tamaño de <text> informado por getBBox() cambia a medida que cambia la transformación.

Ejemplo completo:

 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>

En este ejemplo, resizeObserver se activa cada vez que cambia la escala, y las dimensiones informadas por getBBox() son diferentes cada vez (con ligeras variaciones).

¿Por qué? ¿Y hay alguna manera de obtener siempre un resultado consistente?