1

我试图在我的 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>

4

1 回答 1

1

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 在中心。你可以把它改回原来的样子。

于 2020-08-17T07:33:15.390 回答