Calculating vertical height of a SVG text

javascript text svg tspan
Scaraffe picture Scaraffe · Oct 13, 2011 · Viewed 14.7k times · Source

I have an array of strings. Say,

['Jan 11','Feb 11']

And i am creating a vertical text with these string like so

<text x="60" y="154" text-anchor="middle" style="text-anchor: middle; font: normal normal normal 12px/normal Helvetica, Arial; " font="12px Helvetica, Arial" stroke="none" fill="#ffffff" transform="rotate(90 59.75 150)">
<tspan>Jan 11</tspan>
</text>

After the svg has been rendered i find that the height of the text is 36px. Now is there a way to calculate the height of a text that will be rendered beforehand given the font-size?

Answer

bjornd picture bjornd · Oct 13, 2011

You can use getBBox method to calculate dimensions of the SVG nodes.

var textNode = document.getElementsByTagName('text'),
    bbox = textNode.getBBox();

//bbox now have x, y, width and height properties

Related questions

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 …

Read More
How to set text color for my d3 chart title?

I have my d3 chart title, text append on the svg as per below: svg.append("text") .attr("x", (width / 2)) .attr("y", 0) .attr("text-anchor", "middle") .style("font-size", "14px") .text(text); reference here But I would like to set the text …

Read More
How to modify raphael text?

After instantiating Raphael text like so var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!"); how do I go about then modifying that text? t.text = "test"; did not work for me.

Read More