svg text element width

views:

267

answers:

+1 Q:

svg 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?

+2 A:

var bbox = textElement.getBBox();
var width = bbox.width;
var height = bbox.height;

and then set the rect's attributes accordingly.

Link: getBBox() on the SVG Wiki.

NickFitz 2009-10-28 12:38:24

Thanks. I also found another function that could have helped with width. textElement.getComputedTextLength(). I'll try out both tonight and see which works better for me.

spudly 2009-10-28 12:58:23

I was playing with these last week; the getComputedTextLength() method returned the same result as getBBox().width for the things I tried it on, so I just went with the bounding box, as I needed both width and height. I'm not sure if there are any circumstances when the text length would be different from the width: I think perhaps that method is provided to help with text layout such as splitting text over multiple lines, whereas the bounding box is a generic method available on all (?) elements.

NickFitz 2009-10-28 13:45:37

ansaurus

tags:

views:

answers:

svg text element width

related questions