5 Answers
5

Have you experimented with creating text elements separately in a standalone (simpler) example? It should give you a better feeling for how the different attributes control positioning.

For vertical alignment, use the "dy" attribute:

by default, the baseline of the text is at the origin (bottom-aligned)

a dy of .35em centers the text vertically

a dy of .72em places the topline of the text at the origin (top-aligned)

Using em units is nice because it will scale automatically based on the font size. If you don't specify units (such as -20 in your code), it defaults to pixels.

For horizontal alignment, use the "text-anchor" attribute:

the default is "start" (left-aligned for left-to-right languages)

"middle"

"end"

There's also the "dx" attribute, which is tempting to use for padding. However, I wouldn't recommend it because there is a bug in Firefox and Opera that cause it to not work as expected in conjunction with text-anchor middle or end.