SVG 文本边缘未正确对齐

Question

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

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

我目前只尝试解决 Edge 的这个问题。如果您查看下面的 link，我有一个 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>

Answer 1

从包裹 <textPath>.

的 <text> 元素中删除 x 和 y 属性

即变化：

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

到

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

那些 x 和 y 属性似乎让 IE 感到困惑。

https://jsfiddle.net/znhs955p/2/

SVG 文本边缘未正确对齐

SVG text not aligned correctly on edge

html

javascript

css

svg

microsoft-edge