SVGテキストが端に正しく配置されていない

Question

私は、base64背景イメージと2つのテキスト領域（上部と下部のテキスト）を使用してSVGを作成しました。これらのテキスト領域は、2つの入力フォームで更新できます。

これは、Internet ExplorerとEdgeでは正しく機能し、下部のテキストは中央ではなく左に揃えられ、下部のテキストの位置も正しくありません。上部のテキストが正しく表示されています。

現在のところ、この問題をEdgeで解決しようとしています。下のリンクを見ると、SVGのデモと2つのフィールドがあります。クロムまたはFirefox上、例外行動ビューの

https://jsfiddle.net/znhs955p/1/

。

<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属性を削除します。

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/