我需要在SVG中输出多行文本。 为此，我使用以下方案： <text> <tspan> First line </tspan> <tspan> Second line </tspan><
...我需要在SVG中输出多行文本。
为此，我使用以下方案：
<text> <tspan> First line </tspan> <tspan> Second line </tspan></text>
文本的第一行和第二行可以具有不同数量的字符，其可以动态地改变。
我想让第二行出现在第一行和两个文本的中间。
我可以通过为第二个< tspan>添加dy =“15”，使第二行出现在第一行下面。
我可以将每个单独的< tspan>通过添加text-anchor =“middle”到它。
但是如何做那些< tspan>的相对中心对齐？
我试图对每个< tspan>使用x =“0”但显然它不工作，因为每个< 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
. ..