How to get the width of an SVG tspan element

Question

I\'m trying to get the rendered width of a tspan element (located inside a text element) in SVG.

This is my markup:

Answer 1

After trying multiple solutions I found getComputedTextLength to be the most accurate way to get the width of an svg tspan. It is also well supported and behaves the same way on different browsers. I also found that the best way to get the height of a tspan is simply to read the font-size attribute.

Answer 2

You can use getBoundingClientRect() to find the screen-space bounding box of the tspan. I've tested and found this to work in Safari v5.0.4, Firefox 3.6 and 4.0RC, and Opera 11. However, it fails with Chrome, v10.0.648.151 and v11.0.696.14. (It returns a ClientRect with all values set to 0.)

You'll have to transform this client-space rectangle into SVG coordinates by multiplying by the inverse of the screen transform matrix. Here's a working example:
http://phrogz.net/SVG/tspan_bounding_box.xhtml

Pair this with offsetWidth (which works in Chrome and Safari, but not Firefox or Opera) and you have a solution that should work in all browsers that support SVG well.