如何实现SVG文本在对应路径居中且无需硬编码坐标

要实现动态获取路径的文本居中（无需硬编码坐标），只需给每个<textPath>配合父<text>添加三个通用属性即可：

• startOffset="50%"：动态定位到路径的几何中点（基于路径总长度自动计算）
• text-anchor="middle"：让文本内容以中点锚点为中心左右对齐
• dominant-baseline="middle"：让文本在垂直方向（相对于路径切线）居中

修改后的完整代码 #

CSS #

.st1 {
  fill: #cccccc;
}
.st1:hover {
  fill: #dddddd;
}

SVG #

<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1062.7 852.6" xml:space="preserve">
  <g>
    <path class="st1" id="p1" d="M749.4,155.5l-3.9-1.5l-2-4.3l-3.7-3l-6.3-2.8l-3.7,0.4l-6.3-1.9l-0.9,3l-3.9,1.5l-2.2-0.7l-3.5-4.4l-0.6-1.3
       l1.1,0.4l0.2-1.3l-1.7-1.1l0.6-3.1l-1.5-0.6l-0.2-0.7l2.4-4.6l0.4-4.3l2-1.3l-1.1-2.6c0,0,2-5,1.9-5c-0.4,0-6.3-1.3-6.3-1.5
       c0.2,0,3.1-6.7,3.1-6.7l-0.2-2.4l-4.4-3.1l-0.9,3.7l-2.4,1.1l-12.8,0.6c0,0-2-7.2-2.4-7.2s-4.3-1.3-4.3-1.3l0.2,4.1l-1.5,3.5
       l-4.3-1.1l-1.9,1.1l-6.3-0.6l-0.7-3.3l-2.6-1.1l-2.2,1.5l-0.7,0.6l-1.5,1.7l-1.9-0.2l-0.7-0.4l-1.3,0.6h-1.7l-1.9-3.5l-6.1-2.4
       l-1.5,2l-1.9-0.9l-1.3,5.6l1.9,2.8l-3.1,6.1l-1.1,0.6c0.2,1.1,0.4,2,0.4,2.2s-2,1.7-2,1.7l1.9,2.4l0.6,4.4l3,3.9v3l-2,2.4l-3,2.6
       l0.6,3.1L642,143l-1.1,1.9v1.7l-0.9,1.5l-0.2,3l-1.1,0.9v8l2.4,2.6l-0.6,2.4h-4.3l-2.2,3.3l0.7,3.3l-1.1,0.6l-2.4,0.6
       c0,0-1.3,0.9-1.5,1.3c-0.2,0.4-2.8,2.2-2.8,2.2v7l0.9,0.4l0.4,4.4l1.9,0.7l3.3,0.4v1.3h-2.2l-2.8,0.7l-1.7,0.7l-0.2,4.3l-2.4,1.5
       l0.6,5.4l-0.7,0.2l-2.6-0.6l-1.3,1.1l0.6,1.3l0.4,2l0.2,0.9l3.7,3l0.4,2.6l2.4,3.1h2l2.4,0.6v-0.7l3.3,2.6l1.7-1.9l3-0.2l4.6,3.3
       l3.9-0.7v-3.1l3.1-5.6h1.5v1.3l-0.9,2.4l0.9,0.7l-1.5,1.3v2h4.3l0.2,2l-1.3,0.7l-0.6,1.9v1.7l1.5,2.4h3.5l1.3,2.4l1.3,1.1h3.7v2.6
       h2.2V232h3.3l2.6,2.6l1.3-1.3l4.8,1.7l5.7-1.1l0.7-2.6l5.6-7l-2.2-3.1v-1.1l7.4-5.9l0.9-4.4l6.9-5.6l3.9-0.6l3.9-0.4
       c0,0,1.9-0.6,2.2-1.3c0.4-0.7,0.7-1.5,0.7-1.5l0.9,0.4v1.1l1.9,0.2l2.2-1.7l-1.3-1.3l2-1.9l1.9,0.7l1.3-0.7l1.9-5.6l4.6-2.6
       l-1.7-1.5v-1.9l2.8-1.7l1.3,2.4l3.7-1.3v-1.5l-1.3-1.9l2.6-1.3l1.3-5.7l0.9-0.7V172l2.4-0.9v-1.9h1.3l-1.3-2.6l2.6-0.9l3-5.6
       l1.7-1.1L749.4,155.5z"/>
    <text style="font-size: 24px;" dominant-baseline="middle">
      <textPath xlink:href="#p1" startOffset="50%" text-anchor="middle">Text 1</textPath>
    </text>
  </g>
  <g>
    <path id="p2" class="st1" d="M553.5,132l-2,6.3l-2.6,1.9l-0.2,1.1l8.1-0.6l1.7-1.7l4.4,3l-0.4,1.9l-0.4,4.4h-2.4l-0.2,3.5h1.9l0.6,1.3h2.6
       l0.6,1.5l3.9-0.2l2,1.7l0.7-1.5l3.3,0.4l0.4-3.1h2.6l2.4,1.3v5l-4.3,5.6l-1.5,2.6h-2.6v3H568l-0.7,2.6v6.1l-3,2.6v3.9l1.1,2.6
       l1.5,1.3c0,0-1.9,1.9-2.4,1.9c-0.6,0,0,2.2,0,2.2h3.7l1.9,0.9v5.2h1.1l1.9,3.9l1.9,1.1v1.5h-1.9l-0.9,1.7v4.1l-0.9,3.7h3.7
       l-0.2,0.2l2.4-0.2l1.7,2h1.5l1.3-3h1.3l3.3,1.7l0.9,1.5l2.8-0.2l1.3,0.9h2v-2l2.2-1.9h6.9v1.9h1.1l3.7-3.3l3.1-0.6l1.7-2.4h3.3
       l3-2.4l2.6,0.2l-0.4-2l-0.6-1.3l1.3-1.1l2.6,0.6l0.7-0.2l-0.6-5.4l2.4-1.5l0.2-4.3l1.7-0.7l2.8-0.7h2.2v-1.3l-3.3-0.4l-1.9-0.7
       l-0.4-4.4l-0.9-0.4v-7c0,0,2.4-1.9,2.8-2.2s1.5-1.3,1.5-1.3l2.4-0.6l1.1-0.6l-0.7-3.3l2.2-3.3h4.3l0.6-2.4l-2.4-2.6v-8l1.1-0.9
       l0.2-3l0.9-1.5v-1.7l1.1-1.9l1.3-1.1l-0.6-3.1l3-2.6l2-2.4v-3l-3-3.9l-0.6-4.4l-1.9-2.4c0,0,2-1.3,2-1.7c0-0.2-0.2-1.1-0.4-2.2
       l-10.1,4.5l-4.6,0.2l-1.5-2l-2.4,1.7v2l-4.1,3.3l0.4-3.9c0,0-2.6-1.1-2.6-1.3c0-0.4,0-3.5,0-3.5l-3.5,0.7l-1.1-2l-2.4,1.3l0.7,2.6
       l-6.7,2.4l-4.1,0.6l0.6-5.6l2-0.9v-1.5l-7.2,0.4l-4.8-4.1l-3.3,2.4l-3.3-0.7l-2.2,2.4h-6.3l0.6,1.9l-2.8,0.7v2.2l-3-1.7
       c0,0,1.5-3.3,1.5-3.7c0-0.2-1.5-6.3-1.5-6.3l-1.7,0.7l-1.1,6.1l-3.9,1.7l-2.4-0.9c0,0-3.1,4.3-3.1,4.4l-0.6,2.2l-2.8-0.4l-1.7,1.3
       l-0.2,6.5L553.5,132z"/>
    <text style="font-size: 24px;" dominant-baseline="middle">
      <textPath xlink:href="#p2" startOffset="50%" text-anchor="middle">Text 2</textPath>
    </text>
  </g>
</svg>

关键说明 #

1. 动态中点定位：startOffset="50%"是SVG原生支持的动态计算方式，不管路径是直线、曲线还是闭合图形，都会自动定位到路径总长度的中点，完全不需要硬编码坐标。
2. 文本居中对齐：text-anchor="middle"让文本内容以中点锚点为中心左右对称，dominant-baseline="middle"确保文本在垂直方向上（相对于路径的切线方向）居中，避免文本偏移到路径上方或下方。
3. 兼容性：保留xlink:href是为了兼容SVG1.1环境，如果你的项目使用SVG2标准，可以直接替换为href（无需xlink命名空间）。

内容的提问来源于stack exchange，提问作者Manuel Simões