Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
38
rated 0 times [  42] [ 4]  / answers: 1 / hits: 25434  / 12 Years ago, fri, april 20, 2012, 12:00:00

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>

More From » image

 Answers
156

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/


[#86103] Thursday, April 19, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
piper

Total Points: 734
Total Questions: 93
Total Answers: 112

Location: Burundi
Member since Wed, Apr 6, 2022
2 Years ago
piper questions
Thu, Apr 22, 21, 00:00, 3 Years ago
Thu, Mar 11, 21, 00:00, 3 Years ago
Wed, Jun 12, 19, 00:00, 5 Years ago
Tue, Jun 11, 19, 00:00, 5 Years ago
;