css - 将文本行对齐到SVG的中心

我需要在SVG中输出多行文本。
为此，我使用以下方案:

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

文本的第一行和第二行可以具有不同数量的字符，可以动态更改。
我希望第二行显示在第一行下方，并且两个文本均居中。

通过为第二个dy="15"添加<tspan>，可以使第二行显示在第一行下方。

我可以通过将<tspan>添加到每个text-anchor="middle"中来对齐文本。

但是，如何对这些<tspan>进行相对中心对齐？

我尝试对每个x="0"使用<tspan>，但显然不起作用，因为每个<tspan>具有不同的宽度，并且较短行中的呈现文本向左移动。

有没有一种方法可以仅使用CSS和/或SVG来对齐2个不同宽度的<tspan>的中心。

最佳答案

如果将text-anchor="middle"添加到每个tspan中，则将它们居中(您还必须删除tspan之间的空间，否则多余的空间将被视为第一行的一部分，它们将不会完全居中)。

例如:

<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