在不同的浏览器中对齐SVG分组的tspan

Question

为了使网页响应，我将图形和div迁移到SVG图像。 imgae本身在所有浏览器中运行良好。但我还使用<text>和<tspan>元素将动态填充的文本段落迁移到SVG。  当使用不同的浏览器开发人员工具进行模拟时，一切正常，值会更新并且所有比例都会变化。

但是，在对齐分组文本时，浏览器的行为会有所不同，让我感到头痛。我想要两列价值观。右列应对齐右侧，右侧列对齐左侧。为实现这一点，我使用了text-anchor="end"左侧的值组。该组导致不同浏览器出现问题。

当我使用缩进，可读和＆amp;可编辑（恕我直言）代码Chrome和Firefox将前两行向左移动一个档位（或者向右移动最后一行？）和IE / Edge显示全部符合：

当我在<tspan>元素内完全编写<text>元素的代码时，内联FF和Chrome显示效果很好，但这次IE / Edge缩进左边的最后一行。

我可以用小提琴重现这个问题： https://jsfiddle.net/bL16wv3z/12/

Chrome和FF将右侧列对齐，而IE / Edge将显示左侧列对齐良好。

小提琴中使用的示例代码：

<div id="svgContainer">
   <svg viewBox="0 0 923 500">
      <g transform="translate(50,5)">
         <text text-anchor="end">
            <tspan></tspan>???</tspan>
            <tspan dy="1.2em" x="0">???</tspan>
            <tspan dy="1.2em" x="0">???</tspan>
         </text>
         <text dx="5">
            <tspan>A</tspan>
            <tspan dy="1.2em" x="5">B</tspan>
            <tspan dy="1.2em" x="5">C</tspan>
         </text>
      </g>

      <g transform="translate(150,5)">
         <text text-anchor="end">
            <tspan></tspan>???</tspan><tspan dy="1.2em" x="0">???</tspan><tspan dy="1.2em" x="0">???</tspan>
         </text>
         <text dx="5">
            <tspan>A</tspan><tspan dy="1.2em" x="5">B</tspan><tspan dy="1.2em" x="5">C</tspan>
         </text>
      </g>
   </svg>
</div>

那么如何使对齐在所有浏览器中都有效，或者我在格式化/放置中遗漏了什么？

提前致谢