Firefox is great, we love it. But it’s got a bug with SVG.
Recently we build a dynamic SVG graphic and came across the problem where in Google Chrome and Microsoft Edge worked great however Firefox wasn’t showing test along path.
The SVG schema says path co-ordinates can be listed with spaces or comma separated. Whilst that’s true for Chrome and Edge – Firefox has an issue with comma’s in the path co-ordinate layout.
This code will work in Chrome and Edge:
<svg viewbox="0 0 600 600">
<path d="M20 25, Q505 43, 501 500" fill="transparent" stroke="#dfdfdf" stroke-width="2" id="ArrowPath"/>
<text dy="-3" dx="320" text-anchor="start" text-rendering="optimizeLegibility" class="arrow_labels" fill="#dfdfdf" stroke-width="0">
<textPath href="#ArrowPath">WORDING WORDING</textPath>
</text>
</svg>This code will work in all three major browsers. Note the ONLY difference is the removal of the comma’s from the path d attribute
<svg viewbox="0 0 600 600">
<path d="M20 25 Q505 43 501 500" fill="transparent" stroke="#dfdfdf" stroke-width="2" id="ArrowPath"/>
<text dy="-3" dx="320" text-anchor="start" text-rendering="optimizeLegibility" class="arrow_labels" fill="#dfdfdf" stroke-width="0">
<textPath href="#ArrowPath">WORDING WORDING</textPath>
</text>
</svg>