垂直居中多行 SVG 文本

Question

谁能给我一个示例，说明如何在 SVG 中垂直居中多行文本？我用谷歌搜索了很多对 alignment-baseline 和 dominant-baseline 的引用，但没有具体的例子可供我查看。

例如，在以下 SVG 中，TEXT 元素被其左上角锁定。文本在该 y 位置之后开始出现。如果我想让文本在那个 y 位置的上方和下方均匀分布，我需要做什么？

<text x="110" y="50" dy="0">
   <tspan dy="0em" x="110" style="font-weight: bold; fill: rgb(74, 76, 77);">
     <tspan x="110" dy="0em">This is my long quotation that will now wrap</tspan>
     <tspan x="110" dy="1.1em">over multiple lines, maybe even two lines!</tspan>
     <tspan x="110" dy="1.1em">Isn't that amazing?</tspan>
   </tspan>
   <tspan dy="1.5em" x="110" style="font-style: italic;">
     Speaker, Speaker Description
   </tspan>
</text>

（如果有帮助，我正在通过 D3 生成它）

Answer 1

您不能真正使用 SVG 进行自动居中。 SVG 没有适当的自动布局。

但是，您可以使用dy，就像您正在做的那样，相对于您的基线定位文本。记住dy 也可以是负数。

<svg width="400" height="150">

  <line x1="110" y1="50" x2="400" y2="50" stroke="red"/>
  <text x="110" y="50">
     <tspan x="110" dy="-0.8em">This is my long quotation that will now wrap</tspan>
     <tspan x="110" dy="1.1em">over multiple lines, maybe even two lines!</tspan>
     <tspan x="110" dy="1.1em">Isn't that amazing?</tspan>
  </text>

</svg>

您可以做的另一件事是使用<foreignObject> 元素将HTML 嵌入到您的SVG 中。显然这只适用于浏览器。