Text posittion / bounding box inconsistent

[arsu-leo]

The text position is not consitent with it's bounding box:

var container = document.getElementById('container')
var svg = Snap(200, 200);
container.appendChild(svg.node);

//Set background
var bgRect = svg.rect(0, 0, '100%', '100%');
bgRect.attr({ fill: '#DDDDDD' });

//Main cross
var vert = svg.line(100, 0, 100, 200);
vert.attr({ 'stroke': '#000000','stroke-width': 1});
var hor = svg.line(0, 100, 200, 100);
hor.attr({ 'stroke': '#000000','stroke-width': 1});

//Text element
var text = svg.text(100, 100, 'TEXT');
text.attr({'id' : 'text-id'});

var bbox = text.getBBox();
var text = "Text attr (x, y):" + [text.attr('x'), text.attr('y')].join(', ')
    + "<br>"
  + "Text bounds(x, y, height, width):" + [bbox.x, bbox.y, bbox.h, bbox.w].join(', ');
var p = document.createElement('p');
p.innerHTML = text;
document.body.appendChild(p);

HTML:

<div id="container">
</div>  

Fiddle: https://jsfiddle.net/x5qf7bz4/4/

Output: Text attr (x, y):100, 100 Text bounds(x, y, height, width):100, 86, 17, 41.1

Crreating a text at 100,100, attr(x, y) is 100, but it's bounding box is 100, 86.

Text is based on bottom left instead of top left as all other elements?

Thank you

[ibrierley]

This just comes from whatever the browser thinks it is. Eg if you add console.log(text.node.getBBox()) you will see it's the same.

x,y are the positions of the text baseline.