Search code examples
javascriptdomtextsvg

SVG get text element width

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?

Solution 
  • 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.