9.3 Text Alignment

The <text> element lets you specify the starting point, but you don't know, a priori, its ending point. This would make it difficult to center or right-align text, were it not for the text-anchor property. You set it to a value of start, middle, or end. For fonts that are drawn left-to-right, these are equivalent to left, center, and right alignment.

Example . Use of text-anchor

Start Middle End 
<svg width="200px" height="100px" xmlns="http://www.w3.org/2000/svg">
  <g style="font-size: 14pt;">
  <path d="M 100 10 v 90" style="stroke: gray; fill: none;"/>
  <text x="100" y="30" style="text-anchor: start">Start</text>
  <text x="100" y="60" style="text-anchor: middle">Middle</text>
  <text x="100" y="90" style="text-anchor: end">End</text>
  </g>
</svg>