在textPath中繪製不同跨瀏覽器的svg tspans

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瀏覽器的完整性將爲每個文本片段使用單獨的文本元素，並使用正常的x/y定位和變換/旋轉來呈現文本。

Firefox實際上正在渲染正確。根據1.1規範，每個新的textPath的開始應該是當前文本位置的絕對重置。你應該手動調整tspans的dy偏移量，使它們是累積的（而不是8pt，應該是8pt，16pt，24pt）。所以它實際上是一個Chrome bug，首先你的東西就可以運行。

邊緣似乎只支持每個文本元素的單個textPath元素，所以您確實需要將每個textPath包裝到它自己的文本元素中。