Javascript SVG文本在边缘上未正确对齐

我创建了一个SVG，它有一个base64背景图像和两个文本区域（顶部和底部文本）。这些文本区域可以通过两个输入表单进行更新

除了在Internet Explorer和Edge上，此功能正常工作，即底部文本向左对齐而不是居中对齐，并且底部文本的位置也不正确。顶部文本显示正确

我目前仅尝试为Edge解决此问题。如果您查看下面的链接，我有一个SVG的演示和两个字段

在chrome或firefox上查看例外行为

<text
    xml:space="preserve"
    style="font-style:normal;font-weight:normal;font-size:12.58850098px;line-height:1.25;font-family:sans-serif;letter-spacing:2px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.43085253"
    id="bottom"
    transform="matrix(0.91651557,0,0,0.91221872,8.953221,18.767226)"
    x="1.5895385"
    y="3.9430504">

    <textPath
        xlink:href="#ellipse4592"
        startOffset="50%"
        id="bottom-text"
        style="font-size:21px;letter-spacing:2px;stroke-width:1.43085253">
            Bottom Text
    </textPath>
</text>


<text
    id="text4630"
    style="font-style:normal;font-weight:normal;font-size:13.35012245px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.66707253"
    xml:space="preserve"
    transform="matrix(-0.90287605,0,0,-0.90624359,513.44619,329.63062)">

    <textPath
        xlink:href="#path5204"
        startOffset="50%"
        id="top-text"
        style="font-size:18px;stroke-width:1.66707253">
            Top Text
    </textPath>
</text>

从包裹对象的元素中删除x和y属性

即改变：

<text ...
      x="1.5895385"
      y="3.9430504">
  <textPath ... id="bottom-text" ...>Bottom Text</textPath>
</text>

到

那些x和y属性似乎令人困惑

<text ...>
  <textPath ... id="bottom-text" ...>Bottom Text</textPath>
</text>