views:

351

answers:

2

Hi,

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!");

but does not position the text like all other objects...

x, y coordinates specify the center of the object! Not the "left and top most" pixel!


I would like to "left align" the text along a line, same as standard HTML.

Help would be very much appreciated.

+4  A: 

Resolved!

By using the following

paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);

it now aligns text on the left.

RadiantHex
can you explain why?
brad
+1  A: 

Text-anchor property for text method is set to 'middle' by default.

If you want to left align it then change text-anchor in attributes for the object:

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!").attr({'text-anchor': 'start'});
dasha salo