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

Posted 2023-03-05

【中文标题】在 SVG 中将文本行对齐到中心

【英文标题】：Align lines of text to center in SVG

【发布时间】：2014-06-09 22:10:12

【问题描述】：

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

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

文本的第一行和第二行可以有不同的字符数，可以动态变化。 我希望第二行出现在第一行下方，并且两者中的文本都居中。

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

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

但是如何做那些<tspan>的相对居中对齐呢？

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

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

【问题讨论】：

` text-anchor="middle"` ?

我添加了你上面提到的所有属性并且它有效：jsfiddle.net/helderdarocha/e4bAh

垂直居中：alignment-baseline="middle" / 水平居中：text-anchor="middle"

【参考方案1】：

DEMO

text-anchor='start' 用于右对齐。

text-anchor='middle' 用于中间对齐。

text-anchor='end' 左对齐。

演示代码：

<svg   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>

阅读更多关于文本锚属性here

【讨论】：

这两个tspan标签实际上出现在同一行（并且演示没有使用给定的代码示例）...

虽然提供的演示并不是对这个问题的直接回答，但我不得不赞成它，因为演示显示了对齐文本的其他选项。为此 +1。

【参考方案2】：

如果您将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

【讨论】：

+1 因为这使用dy 回答了问题的多行部分，正如 OP 建议的那样。

非常感谢。这解决了问题。有趣的是，空间确实是造成线条错位的原因。

我想你忘记了一点：translate(100)，其中 100 是 svg 宽度的一半，使基点位于中心，因此 x="0" 和 text-anchor="middle" 将文本居中

谢谢@Eric。我也在寻找transform="translate(100)"，因为tspan 中的x 覆盖了text 中的x，我希望tspans 相对于text。

【参考方案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>

【讨论】：

关键点是：svg 不是 css，你不是在一个盒子或其他东西中将文本居中，把 x="50%" 想象成一个光标，x 必须居中，ŧext-anchor="middle" 只需定义文本原点（将放置在 x 处）