<p>I am trying to make SVG XML documents with a mixture of lines and brief text snippets (two or three words typically). The major problem I'm having is getting the text aligning with line segments.</p>

<p>For horizontal alignment I can use <code>text-anchor</code> with <code>left</code>, <code>middle</code> or <code>right</code>. I can't find a equivalent for vertical alignment; <code>alignment-baseline</code> doesn't seem to do it, so at present I'm using <code>dy="0.5ex"</code> as a kludge for centre alignment.</p>

<p>Is there a proper manner for aligning with the vertical centre or top of the text?</p>

[{'answer_id': 73257, 'author': 'Ian G', 'author_id': 5764, 'author_profile': 'https://Stackoverflow.com/users/5764', 'pm_score': 7, 'selected': True, 'text': '<p>It turns out that you don\'t need explicit text paths. Firefox 3 has only partial support of the vertical alignment tags (<a href="http://groups.google.com/group/mozilla.dev.tech.svg/browse_thread/thread/1be0c56cfbfb3053?fwc=1" rel="noreferrer">see this thread</a>). 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.</p>\n\n<pre><code>&lt;path d="M10, 20 L17, 20"\n      style="fill:none; color:black; stroke:black; stroke-width:1.00"/&gt;\n&lt;text fill="black" font-family="sans-serif" font-size="16"\n      x="27" y="20" style="dominant-baseline: central;"&gt;\n  Vertical\n&lt;/text&gt;\n\n&lt;path d="M60, 40 L60, 47"\n      style="fill:none; color:red; stroke:red; stroke-width:1.00"/&gt;\n&lt;text fill="red" font-family="sans-serif" font-size="16"\n      x="60" y="70" style="text-anchor: middle;"&gt;\n  Horizontal\n&lt;/text&gt;\n\n&lt;path d="M60, 90 L60, 97"\n      style="fill:none; color:blue; stroke:blue; stroke-width:1.00"/&gt;\n&lt;text fill="blue" font-family="sans-serif" font-size="16"\n      x="60" y="97" style="text-anchor: middle; dominant-baseline: hanging;"&gt;\n  Bit of Both\n&lt;/text&gt;\n</code></pre>\n\n<p>This works in Firefox. Unfortunately Inkscape doesn\'t seem to handle dominant-baseline (or at least not in the same way).</p>\n'}, {'answer_id': 23681125, 'author': 'mjswensen', 'author_id': 926279, 'author_profile': 'https://Stackoverflow.com/users/926279', 'pm_score': 2, 'selected': False, 'text': '<p>This effect can indeed be achieved by setting <code>alignment-baseline</code> to <code>central</code> or <code>middle</code>.</p>\n'}]
['https://Stackoverflow.com/questions/56402', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5764/']