I'm trying to place some text via textPath
<svg id="svg1" style="overflow:visible;height:min-content">
<path id="path1" stroke="black" d="M 0 50 L 100 50" stroke-width="10" />
<text text-anchor="middle" >
<textPath href="#path1" startOffset="50%" fill="red">
<tspan dy="26" rotate="180" font-size="100">O</tspan>
</textPath>
</text>
</svg>But for some reason this same code gives different output for different browsers
for Brave:
for firefox:
How do I fix this so that it gives the same output regardless of which browser you use?