Aligning text in SVG Aligning text in SVG xml xml

Aligning text in SVG


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

<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 doesn't seem to handle dominant-baseline (or at least not in the same way).


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