Align text in SVG

Question

I am trying to make SVG XML documents with a mixture of lines and short pieces of text (usually two or three words). The main problem I am facing is aligning text with line segments.

For horizontal alignment, I can use text-anchor with left , middle or right . I can not find the equivalent for vertical alignment; alignment-baseline doesn't seem to do this, so I am currently using dy="0.5ex" as kludge to center alignment.

Is there a suitable way to align with a vertical center or top of the text?

Answer 1

Turns out you don't need explicit text paths. Firefox 3 has only partial support for vertical alignment tags ( see this thread ). It also seems that the dominant-baseline only works when applied as a style, while a text anchor can be part of a style attribute or tag.

 <path d="M10, 20 L17, 20" style="fill:none; color:black; stroke:black; stroke-width:1.00"/> <text fill="black" font-family="sans-serif" font-size="16" x="27" y="20" style="dominant-baseline: central;"> Vertical </text> <path d="M60, 40 L60, 47" style="fill:none; color:red; stroke:red; stroke-width:1.00"/> <text fill="red" font-family="sans-serif" font-size="16" x="60" y="70" style="text-anchor: middle;"> Horizontal </text> <path d="M60, 90 L60, 97" style="fill:none; color:blue; stroke:blue; stroke-width:1.00"/> <text fill="blue" font-family="sans-serif" font-size="16" x="60" y="97" style="text-anchor: middle; dominant-baseline: hanging;"> Bit of Both </text> 

This works in Firefox. Unfortunately, Inkscape does not seem to cope with the dominant base (or at least not in the same way).

Answer 2

This effect can really be achieved by setting alignment-baseline to central or middle .