SVG get text element width

user_163699 0
Viewed 100422

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?

svg text dom javascript
7 Answers

SVG spec has a specific method to return this info: getComputedTextLength()

var width = textElement.getComputedTextLength(); // returns a pixel number
user_9880890

If you are using NodeJS and want to keep your application light (e.g. not use a headless browser). A solution that can be used, is to pre-calculate the font size.

  1. Using: https://github.com/nicktaras/getFontCharWidth you can determine the width of each character within a font.

  2. Then within a node js app for example, you can iterate through each character to calculate the actual width.

user_34845570
Related