SVG文本在邊緣上沒有正確對齊

我創建了一個帶有base64背景圖像和兩個文本區域（頂部和底部文本）的SVG。這些文本區域可以通過兩個輸入表單進行更新。SVG文本在邊緣上沒有正確對齊

此功能除了在Internet Explorer和Edge上正常工作外，底部文本對齊到左側而不是中間，底部文本的位置也不正確。頂部文本顯示正確。

我目前只試圖爲Edge解決此問題。如果你查看下面的鏈接，我有一個SVG和兩個領域的演示。

有關鉻或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>

來源

2017-09-14 George Harrington

從用於包裝的<textPath>的<text>元素x和y屬性。

I.e.改變：

<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/

來源

2017-09-14 14:24:14

SVG文本在邊緣上沒有正確對齊

回答

相關問題