Question

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

除了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>

Answer 1

从包含x的{{1}}元素中删除y和<text>属性。

即。改变：

<textPath>

到

<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属性似乎让IE混淆。

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

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

1 个答案: