如何在SVG区域中居中放置文本

问题描述

我正在尝试将文本居中放置在SVG区域中，但没有成功。有人对如何优化它有什么见识吗？

<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>

解决方法

OP正在评论：

我只希望文本位于彩色区域内并且右侧向上。

在这种情况下，您不需要使用textPath。您需要获取路径的中心。为此，您首先要获得路径的边界框：let bb = thePath.getBBox()

接下来，您将获得路径的中心：

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

最后，将文本的x和y属性设置为x和y，以确保文本以该点为中心：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>

观察：我已经更改了svg元素的viewBox，因为我想在中间放置thePath。您可以将其更改回原来的状态。

icons svg