Why isn't my text path on this circle rendering? - svg

Question

I'm going crosseyed trying to figure out why my text isn't showing up. Before I asked this, I had not seen it working in Firefox as it apparently does now.
<svg style="background-color: white" viewBox="-150 -150 300 300" width="300" height="300">
<circle id="circ0-0" cx="0" cy="0" r="121" stroke="#58595B" stroke-width="3" fill="transparent" style="transform: rotate(90deg)">
</circle>
<text class="donutText" dy="0">
<textPath startOffset="50%" xlink:href="#circ0-0" style="text-anchor: start;">Test test test.</textPath>
</text>
</svg>
Can this be accomplished in all browsers?

Answer 1

It appears that textPaths don't work on circles in all browsers. Only on actual paths, like:
<svg style="background-color: white" viewBox="-150 -150 300 300" width="300" height="300">
<path id="circ0-0" d="M 0 0 m -121, 0 a 121,121 0 1,0 242,0 a 121,121 0 1,0 -242,0" stroke="black" stroke-width="3" fill="white" style="transform: rotate(180deg)">
</path>
<text class="donutText" dy="0">
<textPath startOffset="50" xlink:href="#circ0-0" style="text-anchor: middle;">Test test test.</textPath>
</text>
</svg>

Answer 2

use defs (copy path like circle)
Ok I fix my answer and I use defs to define another path that like circle, it is really easy to change the path-"circle" radius (by for examle the all 125 to 100 and the 250 to 200)
So, it is like use the path only.. but there is advantage to use circle and the path in defs
BTW you can change the start of path by change dx="0"
<svg style="background-color: white" viewBox="-150 -150 300 300" width="300" height="300">
<g>
<defs>
<path d="M 0 0 m -125 0 a 125 125 0 1 0 250 0 a 125 125 0 1 0 -250 0" id="path-circle" />
</defs>
<circle stroke="#58595B" stroke-width="3" fill="transparent" cx="0" cy="0" r="128"/>
<text dx="0">
<textPath xlink:href="#path-circle">Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test</textPath>
</text>
</g>
</svg>
Update by comment
I find that this way is depends on what you need, and only path can be really good solution!
The advantages for use defs (path) are:
The path circle not always accurate - the green circle (path actually), so if we want to display the circle then rather to use circle and for text the path in defs.
When we want the text be written in concave/convex we need to use path, and the path don't always is circle. (that is when you want to display circle but for text use other shape)
For me it is more readable, like if I see that code I understand that there is a circle, and text go on path shape, In contrast to see path and text.. no clear that the path is circle.
<svg style="background-color: white" viewBox="-150 -150 300 300" width="300" height="300">
<g>
<!-- <defs>
<path d="M 0 0 m -125 0 a 125 125 0 1 0 250 0 a 125 125 0 1 0 -250 0" id="path-circle" />
</defs> -->
<!-- <circle stroke="#58595B" stroke-width="3" fill="transparent" cx="0" cy="0" r="128"/> -->
<path stroke="#58595B" stroke-width="3" fill="transparent" d="M 0 0 m -125 0 a 125 125 0 1 0 250 0 a 125 125 0 1 0 -250 0" id="path-circle" />
<path stroke="green" stroke-width="3" fill="transparent"
d="M0,-62c34,0,63,28,62,62s-28,62-62,62s-62-28-62-62S-34,-62,0,-62z" id="path-circle2"
transform="rotate(-45)"/>
<circle stroke="blue" stroke-width="3" fill="transparent" cx="0" cy="0" r="50"/>
<text dx="0" dy="-4">
<textPath xlink:href="#path-circle">Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test</textPath>
</text>
<text dx="0" dy="-4">
<textPath xlink:href="#path-circle2">Test2 test2 test2</textPath>
</text>
</g>
</svg>