Выравнивание строк текста в центре SVG

Мне нужно вывести несколько строк текста в SVG. Для этого я использую следующую схему:

<text>
  <tspan> First line </tspan>
  <tspan> Second line </tspan>
</text>

Первая и вторая строки текста могут иметь различное количество символов, которые могут изменяться динамически. Я хочу, чтобы вторая строка отображалась в первой строке, а текст в обоих из них был центрирован.

Я могу сделать вторую строку ниже первой строки, добавив dy="15" для второго <tspan>.

Я могу выровнять текст в каждом отдельном <tspan>, добавив text-anchor="middle" к нему.

Но как сделать относительное центрическое выравнивание этих <tspan> 's?

Я попытался использовать x="0" для каждого <tspan>, но, по-видимому, он не работает, поскольку каждая <tspan> имеет разную ширину, а визуализированный текст в более короткой строке сдвинут влево.

Есть ли способ выравнивания центров 2 <tspan> различной ширины, используя только CSS и/или SVG.

Ответ 1

Если вы добавите text-anchor="middle" к каждому tspan, вы центрируете их (вы также должны удалить пространство между tspans, в противном случае дополнительное пространство будет считаться частью первой строки, и они не будут полностью центрированный).

Например:

<svg>
    <text y="50" transform="translate(100)">
       <tspan x="0" text-anchor="middle">000012340000</tspan><tspan x="0" text-anchor="middle" dy="15">1234</tspan>
   </text>
</svg>

Смотрите: JSFiddle

Ответ 2

DEMO

text-anchor='start' для выравнивания по правому краю.

text-anchor='middle' для среднего выравнивания.

text-anchor='end' для выравнивания по левому краю.

Код из демонстрации:

<svg width="100%" height="230" viewBox="0 0 120 230"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

    <!-- Materialisation of anchors -->
    <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />


    <!-- Anchors in action -->
    <text text-anchor="start"
          x="60" y="40">This text will align right</text>

    <text text-anchor="middle"
          x="60" y="75">This text will align middle</text>

    <text text-anchor="end"
          x="60" y="110">This text will align left</text>

    <!-- Materialisation of anchors -->
    <circle cx="60" cy="40" r="3" fill="red" />
    <circle cx="60" cy="75" r="3" fill="red" />
    <circle cx="60" cy="110" r="3" fill="red" />

<style><![CDATA[
text{
    font: bold 15px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
</svg>

Подробнее о свойствах text-anchor здесь

Ответ 3

Ключевые моменты для горизонтального центрирования текста:
1. x="50%"
2. text-anchor='middle'

В вашем случае вы можете написать как:

<svg style="width:100%">
  <text y="50">
    <tspan x="50%" text-anchor="middle"> First line </tspan>
    <tspan x="50%" dy="15" text-anchor="middle"> Second line </tspan>
  </text>
</svg>