svg Text Path renders weired in firefox - svg

Question

In Chrome, this fiddle renders just fine, however in firefox, the curved text is a complete mess:
https://jsfiddle.net/a1khn0cs/1/
<path id="curveBelow" d="M 25,75 A 40 40 0 0 0 95,75" stroke="none" fill="none"></path>
<text class="badge-circle-text" x="42" y="40">
<textPath alignment-baseline="middle" text-anchor="middle" href="#curveBelow">Text Belog</textPath>
</text>
I cannot find a reason why this happens in Firefox.
Could someone give a hint, how I could resolve or find the problem?

Answer 1

dominant-baseline="middle" and text-anchor="middle" are attributes of the text. Also in order to center text on a path you need to use startOffset = "50%" for the textPath and text-anchor="middle" for the text. I hope it helps.
<svg viewBox="0 0 120 120" width=120 height=120 version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="81512f4465f92d314502bc64-alpha">
<feColorMatrix type="saturate" values="0" result="desat"></feColorMatrix>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1"></feFuncR>
<feFuncG type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1"></feFuncG>
<feFuncB type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1"></feFuncB>
</feComponentTransfer>
</filter>
<mask id="81512f4465f92d314502bc64-grungeMask" x="0" y="0" width="180" height="180" maskUnits="objectBoundingBox">
<image x="0" y="0" width="180" height="180" filter="url(#81512f4465f92d314502bc64-alpha)" href="/grunge-mask.png"></image>
</mask>
<clipPath id="81512f4465f92d314502bc64-cutMiddle">
<rect x="0" y="0" width="120" height="45"></rect>
<rect x="0" y="75" width="120" height="45"></rect>
</clipPath>
<path id="81512f4465f92d314502bc64-curveAbove" d="M 25,45 A 40 40 0 0 1 95,45" stroke="none" fill="none"></path>
<path id="81512f4465f92d314502bc64-curveBelow" d="M 25,75 A 40 40 0 0 0 95,75" stroke="none" fill="none"></path>
<mask id="81512f4465f92d314502bc64-mainText">
<rect width="100%" height="100%" fill="#fff" x="0" y="0"></rect>
<text x="50%" y="50%" fill="#000" dominant-baseline="middle" text-anchor="middle">Text Center</text>
</mask>
</defs>
<g mask="url(#grungeMask)">
<circle class="badge-circle-outer-big" cx="60" cy="60" r="50" stroke="black" stroke-width="3" fill="none" clip-path="url(#81512f4465f92d314502bc64-cutMiddle)"></circle>
<circle class="badge-circle-outer-small" cx="60" cy="60" r="47" stroke="black" stroke-width="1" fill="none" clip-path="url(#81512f4465f92d314502bc64-cutMiddle)"></circle>
<circle class="badge-circle-inner-small" cx="60" cy="60" r="26" stroke="black" stroke-width=".5" fill="none" clip-path="url(#81512f4465f92d314502bc64-cutMiddle)"></circle>
<circle class="badge-circle-inner-big" cx="60" cy="60" r="24" stroke="black" stroke-width="1.5" fill="none" clip-path="url(#81512f4465f92d314502bc64-cutMiddle)"></circle>
<text dominant-baseline="middle" text-anchor="middle" class="badge-circle-text">
<textPath startOffset="50%" href="#81512f4465f92d314502bc64-curveAbove">Text Above</textPath>
</text>
<text dominant-baseline="middle" text-anchor="middle" class="badge-circle-text">
<textPath startOffset="50%" href="#81512f4465f92d314502bc64-curveBelow">Text Belog</textPath>
</text>
<path d="M 0,45 L 120,45 L 110,60 L 120,75 L 0,75 L 10,60" fill="black" class="badge-main" mask="url(#81512f4465f92d314502bc64-mainText)"></path>
</g>
</svg>