Get pixel length of String in Svg

Question

I'm currently working with SVG. I need to know the string length in pixels in order to do some alignment. How can I do to get the length of a string in pixel ?

Update: Thanks to nrabinowitz. Based on his help, I can now get the length of dynamic-added text. Here is an example:

<svg id="main" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1" 
    width="1020"
    height="620" 
    viewBox="0 0 1020 620"
    onload="startup(evt)">

<script>
    <![CDATA[
        var startup = function (evt) {
            var width;
            var svgNS = "http://www.w3.org/2000/svg";
            var txtNode = document.createTextNode("Hello");
            text = document.createElementNS(svgNS,"text");

            text.setAttributeNS(null,"x",100);
            text.setAttributeNS(null,"y",100);
            text.setAttributeNS(null,"fill","black");
            text.appendChild(txtNode);                                              
            width = text.getComputedTextLength();               
            alert(" Width before appendChild: "+  width);                       
            document.getElementById("main").appendChild(text);
            width = text.getComputedTextLength();
            alert(" Width after appendChild: "+  width)
            document.getElementById("main").removeChild(text);              
        }       
    //]]>
</script>
</svg>

Clearly, but you are processing an svg in some language, aren't you? — Jasper, Apr 20 '12 at 23:24
If not, I'd say that simply opening the svg with an svg editing program and measuring the size there should so the trick. On top of that, the question doesn't really belong here in that case, I'd say. — Jasper, Apr 20 '12 at 23:25
Yes, I use Javascript. I tried this one, it worked, but when I try to embedded it to — Hoa Nguyen, Apr 20 '12 at 23:33

nrabinowitz · Accepted Answer · 2012-04-21T00:16:06.880

41

I've been wondering this too, and I was pleasantly surprised to find that, according to the SVG spec, there is a specific function to return this info: getComputedTextLength()

// access the text element you want to measure
var el = document.getElementsByTagName('text')[3];
el.getComputedTextLength(); // returns a pixel integer

Working fiddle (only tested in Chrome): http://jsfiddle.net/jyams/

edited Apr 21 '12 at 00:16

answered Apr 21 '12 at 00:08

nrabinowitz

55,314
10
149
165

Thanks to your help. By doing like that, I will be able to get the length of a static element, that is, the elements which is defined before. Here is my solution based on you help to calculate the length of dynamic-added element: http://jsfiddle.net/nxhoaf/Qzav3/4/ – Hoa Nguyen Apr 21 '12 at 09:21
This does not seem to work if the text element is styled using `CSS`; the calculated pixel width corresponds to the document´s default font size. – Matze Apr 07 '15 at 13:34
@nrabinowitz This seems to work, but... I experienced problems when dynamically building `svg` using `snap-svg`. I added a text-element and applied a class to it - just for the purpose of measuring the string and removed the element right after that... – Matze Apr 28 '15 at 13:03
Tested chrome version 48 dynamically added length works fine. make sure to get the element from the array returned by getElementsByTagName. – Tony Shih Mar 10 '16 at 08:47

score 6 · Answer 2 · answered May 10 '14 at 01:03

Having read various similar threads with interest and benefitted from some of the ideas, I've created a page which compares three of the Javascript methods side-by-side. I've noted results in

IE9

Firefox 29.0.1 and

Chrome 34.0.1847.131 m

You can load it in your browser and see what works for you:

http://bl.ocks.org/MSCAU/58bba77cdcae42fc2f44.

Get pixel length of String in Svg

2 Answers2

Linked