css – 将文本行对齐在SVG中居中

前端之家收集整理的这篇文章主要介绍了css – 将文本行对齐在SVG中居中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要在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

猜你在找的CSS相关文章