<h2>揃え位置</h2>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <line x1="100" y1="0" x2="100" y2="200" stroke="#666" />
 <text x="100" y="60" text-anchor="start" fill="#fff">AAA</text>
 <text x="100" y="110" text-anchor="middle" fill="#fff">BBB</text>
 <text x="100" y="160" text-anchor="end" fill="#fff">CCC</text>
</svg>
<pre class="language-svg"><code class="language-svg">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
 &lt;line x1="100" y1="0" x2="100" y2="200" stroke="#666" />
 &lt;text x="100" y="60" text-anchor="start" fill="#fff">AAA&lt;/text>
 &lt;text x="100" y="110" text-anchor="middle" fill="#fff">BBB&lt;/text>
 &lt;text x="100" y="160" text-anchor="end" fill="#fff">CCC&lt;/text>
&lt;/svg>
</code></pre>
<table>
<thead>
<tr>
<th style="text-align:left">揃え位置</th>
<th style="text-align:left">text-anchor</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">左揃え</td>
<td style="text-align:left">start</td>
</tr>
<tr>
<td style="text-align:left">中央揃え</td>
<td style="text-align:left">middle</td>
</tr>
<tr>
<td style="text-align:left">右揃え</td>
<td style="text-align:left">end</td>
</tr>
</tbody>
</table>

みさご解体新書

SVGテキスト

揃え位置

揃え位置	text-anchor
左揃え	start
中央揃え	middle
右揃え	end