如何在SVG的text元素中垂直对齐tspan元素

我已经折腾了好几个小时，想让SVG的text元素里的tspan垂直对齐，但一直没成功。试过用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" y="30" dominant-baseline="central" alignment-baseline="middle"
      fill="green" style="font-size: 20px;">YES</tspan></text>
    </g>
</svg>

需求是让class为t的“ISTRUE:”和class为tt的“YES”在同一行垂直对齐，二者字号不同，也可能用不同字体（目前都是monospace）。试过给两者设相同y值，但视觉上还是差几个像素；也试过动画方案，但因为<g>标签里有大量第三方内容，没法用这种方式。

可行解决方案 #

核心思路是避免基线属性冲突，统一用alignment-baseline对齐中线，不需要额外设置tspan的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"
      style="font-size: 10px; font-family: monospace" fill="black"
      alignment-baseline="middle">ISTRUE:
      <tspan class="tt" fill="green" style="font-size: 20px;"
      alignment-baseline="middle">YES</tspan></text>
    </g>
</svg>

关键调整点 #

• 移除text和tspan上冲突的基线属性（比如tspan的y="30"和dominant-baseline="central"），避免属性冲突导致对齐失效
• 统一给text和tspan设置alignment-baseline: middle，让不同字号的文本基于中线对齐
• 若因字体差异出现细微偏移，可给tspan添加dy属性微调，比如dy="1px"补正像素差

内容的提问来源于stack exchange，提问作者CssHTMLearner MaOKiaOKaO