svg tspans within textPath drawing differently across browsers - firefox

Question

I'm using a textPath and tspans to fit text into a svg path, and it works great in Chrome, but not so much in Edge and FF (o. Any help would be greatly appreciated
Here's a jsfiddle the svg node:
https://jsfiddle.net/ych9dr59/
And here's the relevant text code:
<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 text element is pretty buggy in general in my experience. My recommendation for maximum cross-browser sanity would be to use a separate text element for each text fragment and use normal x/y positioning and a transform/rotate to render your text.
Firefox is actually rendering correctly. According to the 1.1 spec, the start of each new textPath should be an absolute reset of the current text position. You should manually adjust the dy offsets of the tspans so they're cumulative (instead of 8pt in ever one, it should be 8pt, 16pt, 24pt). So it's actually a Chrome bug that your stuff works in the first place.
Edge only seems to support a single textPath element per text element, so you do need to wrap each textPath in its own text element.