48

我需要在 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 来对齐<tspan>不同宽度的 2 的中心。

4

3 回答 3

61

如果你添加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

于 2014-04-24T15:02:57.953 回答
40

演示

在此处输入图像描述

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>

在此处阅读有关 text-anchor 属性的更多信息

于 2014-04-24T14:49:27.313 回答
10

文本水平居中的要点：
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>
于 2017-11-06T11:37:59.160 回答