如何在 SVG 中的文本元素内垂直对齐 tspan 元素

Question

我已经尝试在 SVG 中的跨度内垂直对齐 tspan 几个小时了，但没有成功。

我还尝试使用 stackoverflow 答案和问题中的一些建议，参考

dominant-baseline="middle"

和

alignment-baseline="middle"

，但什么也没发生。

经过一番尝试和错误，我目前所做的就是这里的代码：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="66"
  style="position: absolute; left: 0px; top: 0px; user-select: none;">
    <rect width="200" height="66" x="0" y="0" fill="cyan"></rect>
    <g>
        <text class="t" x="30" y="30" xlink:space="preserve"
      style="font-size: 10px; font-family: monospace" fill="black"
      dominant-baseline="middle" alignment-baseline="middle">ISTRUE:
      <tspan class="tt" dominant-baseline="central" alignment-baseline="middle"
      fill="green" style="font-size: 20px;">YES</tspan></text>
    </g>
</svg>

最后“ISTRUE：”

class="t"

必须与

class="tt"

内的“YES”

class="t"

垂直对齐。

它们有不同的字体大小，也可能有不同的

family-font

（目前它们都是

monospace

）

Answer 1

如果给tt类添加x和y值，就可以垂直对齐。您可以在下面的代码中看到它。您可以根据需要编辑空格。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="66"
  style="position: absolute; left: 0px; top: 0px; user-select: none;">
    <rect width="200" height="66" x="0" y="0" fill="cyan"></rect>
    <g>
        <text class="t" x="30" y="30" xlink:space="preserve"
      style="font-size: 10px; font-family: monospace" fill="black"
      dominant-baseline="middle" alignment-baseline="middle">ISTRUE:
      <tspan class="tt" x="30" y="50" dominant-baseline="central" alignment-baseline="middle"
      fill="green" style="font-size: 20px;">YES</tspan></text>
    </g>
</svg>