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>

Maybe what you need is to use a different path for the text. You may choose one side for _sainte_ and another side for _genevieve_. Also this `id="sainte genevieve"` is not a valid id — enxaneta, Aug 16 '20 at 17:25
@enxaneta My goal is for the the text to be centered; what do you mean by sides? Thanks for noting the invalid ID. The text is still shown though. How would that effect the spacing of the text? — Nick Swekosky, Aug 16 '20 at 20:37
can you edit your question and add an image of what you try to achieve? — enxaneta, Aug 16 '20 at 21:01
@enxaneta I don't have a drawing. I just want the text to be inside the colored region and right side up. — Nick Swekosky, Aug 17 '20 at 01:03

score 1 · Answer 1 · answered Aug 17 '20 at 07:33

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.

How to center text in an SVG region

1 Answers1