Menu
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?
524
To get the height or width of an element in pixels (including padding and borders), use the offsetHeight and offsetWidth properties of the object. These values are readonly.
A text content element is an SVG element that causes a text string to be rendered onto the canvas. The SVG text content elements are: 'text', 'textPath' and 'tspan'. A text content child element is a text content element that is allowed as a descendant of another text content element.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
