Menu
I'm working on some ECMAScript/JavaScript for an SVG file and need to get the width and height of a text element so I can resize a rectangle that surrounds it. In HTML I would be able to use the offsetWidth and offsetHeight attributes on the element but it appears that those properties are unavailable.
Here's a fragment that I need to work with. I need to change the width of the rectangle whenever I change the text but I don't know how to get the actual width (in pixels) of the text element.
<rect x="100" y="100" width="100" height="100" /> <text>Some Text</text> Any ideas?
259
To get text element width of an SVG with JavaScript, we can use the getBBox method. const bbox = textElement. getBBox(); const width = bbox. width; const height = bbox.
To get width and height of SVG element with JavaScript, we can use the getBoundingClientRect method. const el = document. getElementById("yourElement"); const rect = el.
In SVG, text is rendered with the <text> element. The simplest example of a <text> element is one that uses just x and y attributes to place it. Text is rendered by default with a black fill and no outline.
A text content element is an SVG element that causes a text string to be rendered onto the canvas. The SVG text content elements are: 'text', 'textPath' and 'tspan'.
var bbox = textElement.getBBox(); var width = bbox.width; var height = bbox.height; and then set the rect's attributes accordingly.
Link: getBBox() in the SVG v1.1 standard.
106
document.getElementById('yourTextId').getComputedTextLength(); worked for me in
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
