Вопросы по позиционированию SVG текста, в той или иной форме, уже задавались. Например: тут и тут. Но хотелось бы получить полный ответ в сжатой, доступной форме с примерами о наиболее употребляемых способах позиционирования, вертикального и горизонтального выравнивания SVG текста внутри SVG файла.
Известно, что даже современные браузеры, такие как Chrome, Firefox, Opera по разному поддерживают атрибуты команды <text>
, отвечающие за позиционирование.
Например: text-anchor="middle"
поддерживается одинаково разными браузерами, но другой атрибут alignment-baseline="middle"
Chrome поддерживает полностью, а Firefox частично.
В качестве примера позиционирование приведу использование text-anchor
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="200" width="200" style="border:1px solid red;">
<line x1="100" y1="5" x2="100" y2="195" stroke="dodgerblue" />
<g fill="black" font-family="Verdana, serif" font-size="24" font-weight="900">
<text x="100" y="60" style="text-anchor: start;"> Start </text>
<text x="100" y="110" style="text-anchor: Middle;"> middle </text>
<text x="100" y="160" style="text-anchor: end;"> End </text>
</g>
</svg>