Currently, I am puzzled by how SVG.js calculates the precise x and y coordinates of the corrected bounding box (top left corner) from an SVG text object.
This is how my SVG object appears:
<svg xmlns="http://www.w3.org/2000/svg" width="266" height="59" viewBox="0 0 266 59">
<text id="TText" data-name="TText" fill="#707070" font-size="50" font-family="Boogaloo"><tspan x="0" y="0">TText</tspan></text>
</svg>
When I incorporate this code into SVG.js script, the position seems to be y-offset by 11 pixels. I believe this adjustment may be due to the baseline positioning in SVG. Could someone shed light on the calculation process for bounding box x and y coordinates? I attempted to unravel this mystery by delving into the SVG.js repository, but unfortunately, came up empty-handed.
I suspect that the calculations are influenced by the font type. If so, how can one extract this information from a font file?
Below is the code snippet with my SVG.js implementation revealing the accurate X, Y bounding box coordinates:
var draw = SVG().addTo('body');
var text = draw.text('TText');
text.font({
family: 'Boogaloo',
size: 50,
});
console.log(text.bbox());