'SVG <text> element bounding box changes on transform
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?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
