How to center text in an SVG region

Question

I'm attempting to center the text in my SVG region but am not succeeding. Does anyone have any insight on how to optimize this?

<svg xmlns="http://www.w3.org/2000/svg" aria-label="Usa Mo" viewBox="0 0 70.389999 62.16">
    <g>
       <path tabindex="0" aria-label="Sainte Genevieve" fill="red" id="sainte genevieve" name="Sainte Genevieve" 
             d="m 57.466419,33.749401 
                  2.854,2.605 
                  -1.578,2.754 
                  -0.463,-0.343 
                  -0.441,0.418 
                  -1.953,-1.762 
                  -0.824,-0.796 
                  1.293,-1.417 
                  -0.982,-0.73 
                  1.582,-1.112 
                  0.512,0.383"
       > </path>
       <text font-family="Verdana" font-size="0.75" fill="blue">
           <textPath href="#sainte genevieve" startOffset="50%" text-anchor="middle">Sainte Genevieve</textPath>
       </text>
    </g>
</svg>

Answer 1

The OP is commenting:

I just want the text to be inside the colored region and right side up.

In this case you don't need to use a textPath. You need to get the center of the path. For this you first get the bounding box of the path: let bb = thePath.getBBox()

Next you get the center of the path:

let x = bb.x + bb.width/2;
let y = bb.y + bb.height/2;

Finally you set the x and y attributes of the text as x and y making shure that the text is centered around this point: text-anchor="middle" dominant-baseline="middle"

let bb = thePath.getBBox();
theText.setAttribute("x", bb.x + bb.width/2);
theText.setAttribute("y", bb.y + bb.height/2);

svg{border:1px solid; width:300px}

<svg xmlns="http://www.w3.org/2000/svg" aria-label="Usa Mo"  viewBox="50 30 15 12">
 
       <path id="thePath" aria-label="Sainte Genevieve" fill="red" id="sainte_genevieve" name="Sainte Genevieve" 
             d="m 57.466419,33.749401 
                  2.854,2.605 
                  -1.578,2.754 
                  -0.463,-0.343 
                  -0.441,0.418 
                  -1.953,-1.762 
                  -0.824,-0.796 
                  1.293,-1.417 
                  -0.982,-0.73 
                  1.582,-1.112 
                  0.512,0.383"
       > </path>
       <text id="theText" font-family="Verdana" font-size=".75" fill="blue" text-anchor="middle" dominant-baseline="middle">
            Sainte Genevieve
       </text>
</svg>

Observation: I've changed the viewBox of the svg element because I wanted to have thePath in the center. You can change it back to what it was.