SVG TextPath characters missing - svg

Question

I am trying to display a curved text that I'm generating with JavaScript
When I increase the curvature, some characters disappear
Here a JSFiddle I created
Here's my function which generated the path data based on the curve percentage and the text size
public getPathData (width, height, curve): string {
const positive_curve = (curve > 0);
const perimeter = width / Math.abs(curve) * 100;
const radius = perimeter / (2 * Math.PI) + (positive_curve ? 0 : height);
const sign = positive_curve ? 1 : 1;
const side = positive_curve ? 1 : 0;
const diameter_parameter = sign * (2 * radius);
return `m0,${radius}
a${radius},${radius} 0 0 ${side} ${diameter_parameter},0
a${radius},${radius} 0 0 ${side} ${-diameter_parameter},0Z`;
}
Is this a browser issue? Or is the issue lying in the path itself?
Updated code based on #Paul LeBeau answer
public getPathData (width, height, curve): string {
const perimeter = width / Math.abs(curve) * 100;
const radius = perimeter / (2 * Math.PI);
const diameter = radius * 2;
if (curve > 0) {
return `m${radius},${diameter}
a${radius},${radius} 0 0 1 0 ${diameter}
a${radius},${radius} 0 0 1 0 ${diameter}Z`;
} else {
return `m${radius},${diameter}
a${radius},${radius} 0 0 0 0 ${diameter}
a${radius},${radius} 0 0 0 0 ${-diameter}Z`;
}
}
It basically wraps a text around the inside or outside of a circle based on a curve percentage [-100%, 100%]

Answer 1

Your problem is due to the position of the start of the path. Path text won't be drawn past the start or end of the path. In the image below, I have put a black dot where the start of the path is:
<svg viewBox="-270 -270 1290 1280" width="257" height="256">
<path id="curve" fill="white" stroke="red" stroke-width="1px"
d="m0,400
a400,400 0 0 1 800,0
a400,400 0 0 1 -800,0Z">
</path>
<circle cx="0" cy="400" r="20"/>
<text font-size="300" font-family="'Arial'" fill="#ff0000" x="0" y="0" text-anchor="middle">
<textPath href="#curve" startOffset="25%">This is a new test</textPath>
</text>
</svg>
Even though it is a closed path, the text will not wrap back past the start of the path and onto the end part of the path. Any text that overflows the start, will just get cut off.
Since I assume you probably want the text to wrap around the circle from 7 o'clock to 5 o'clock, your simplest solution would be to move the start of the path to the bottom of the circle (6 o'clock):
<svg viewBox="-270 -270 1290 1280" width="257" height="256">
<path id="curve" fill="white" stroke="red" stroke-width="1px"
d="m400,800
a400,400 0 0 1 0,-800
a400,400 0 0 1 0,800Z">
</path>
<circle cx="400" cy="800" r="20"/>
<text font-size="300" font-family="'Arial'" fill="#ff0000" x="0" y="0" text-anchor="middle">
<textPath href="#curve" startOffset="50%">This is a new test</textPath>
</text>
</svg>