Css 在SVG中将文本行对齐到中心

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

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

一线
第二线

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

我可以通过为第二行添加

dy=“15”

，使第二行显示在第一行下方

我可以通过添加

text-anchor=“middle”

来对齐每个

中的文本

但是如何对这些

进行相对中心对齐呢

我尝试对每个

使用

x=“0”

，但显然不起作用，因为每个

都有不同的宽度，并且较短行中呈现的文本向左移动

是否有一种方法可以仅使用CSS和/或SVG来对齐两个不同宽度的

的中心。

右对齐的

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>

此文本将向右对齐
此文本将对齐中间
此文本将向左对齐

---

阅读有关文本锚属性的更多信息

如果在每个

tspan

中添加

text-anchor=“middle”

，您将使它们居中（您还必须删除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>

0000123400001234

---

请参阅：文本水平居中的关键点：
1.

x=“50%”

2. <代码>文本锚class='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>

一线
第二线

`text-anchor=“middle”`？我添加了上面提到的所有属性，它可以工作：垂直居中：

alignment-baseline=“middle”

/水平居中：

text-anchor=“middle”

+1，因为这回答了问题的多行部分，正如OP所建议的那样。非常感谢。这就解决了问题。有趣的是，空间确实是造成线条不对齐的原因。我想你忘记了一点：

translate（100）

，其中100是svg宽度的一半，使基点位于中心，这样

x=“0”

和

text-anchor=“middle”

就为我们带来了文本centeredThanks@Eric。我也在寻找

transform=“translate（100）”

，因为

tspan

中的

x

覆盖了

text

中的

x

，我希望

tspan

相对于

文本放置。两个tspan标记实际上出现在同一行上（并且演示没有使用给定的代码示例）…虽然提供的演示并不是对问题的直接回答，但我不得不对其进行投票，因为演示显示了对齐文本的其他选项+1.关键点是：svg不是css，你没有将文本放在方框或其他东西的中心，想象一下
x=“50%”
像光标一样，x必须居中，
ŧext anchor=“middle”
只需定义文本原点（将放置在x处）