svg tspans内のtextPath描画がブラウザによって異なる

Question

textPathとtspansを使用してテキストをsvgパスに収めていますが、Chromeではうまく機能しますが、EdgeやFFではあまり効果がありません

に感謝ここjsfiddleは、SVGノードです： https://jsfiddle.net/ych9dr59/

そして、ここだ、関連するテキストコード：

<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"> 
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#text_5_4_5_1590" startOffset="50%"> 
     <tspan dy="-14pt">12): Maintain a</tspan> 
    </textPath> 

    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#text_5_4_5_1590" startOffset="50%"> 
     <tspan dy="8pt">policy that</tspan> 
    </textPath> 

    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#text_5_4_5_1590" startOffset="50%"> 
     <tspan dy="8pt">addresses</tspan> 
    </textPath> 

    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#text_5_4_5_1590" startOffset="50%"> 
    <tspan dy="8pt">information security</tspan> 
    </textPath> 

    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#text_5_4_5_1590" startOffset="50%"> 
     <tspan dy="8pt">for all personnel. </tspan> 
    </textPath> 
    </text> 

Answer 1

SVGのテキスト要素は、私の経験では、一般的にはかなりバグが最大CRための私の推薦。 oss-browserは、各テキスト断片に対して別々のテキスト要素を使用し、通常のx/yの位置付けとtransform/rotateを使用してテキストをレンダリングすることができます。

Firefoxが実際に正しくレンダリングされています。 1.1仕様によれば、新しいtextPathのそれぞれは、現在のテキスト位置の絶対的なリセットでなければなりません。 tspansのdyオフセットを手動で調整して累積させる必要があります（8ptではなく8pt、16pt、24pt）。それは実際にあなたのものが最初に動作するChromeのバグです。

エッジは、テキスト要素ごとに1つのtextPath要素しかサポートしていないようです。そのため、各textPathを独自のテキスト要素にラップする必要があります。