Raphael JS and Text positioning?

Question

I\'m trying to position text within the SVG canvas, by supplying x, y coordinates

var t = paper.text(50, 50, \"Raphaël\\nkicks\\nbutt!\");
<         


        

Answer 1

Following code works well in IE , Chrome (Firefox not tested):

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!"),
    b = t._getBBox();
t.translate(-b.width/2,-b.height/2);

Explanation:

in Raphael , text is centered around your given x & y by default, you can set left align with:

t.attr({'text-anchor':'start'})

but you have no attribute to set it top align. I firstly tried :

var b=t.getBBox(); 

but it returned NaN in IE, so I turned to:

var b=t._getBBox();

_getBBox() is undocumented but used internally by Raphael itself , and it works!

Hope it helps.