在SVG Path元素上居中文字的最优实现方案是什么？

核心结论 #

纯静态SVG（无JavaScript）原生不支持任意自定义路径的文本自动居中：alignment-baseline、text-anchor仅为文本元素的自有属性，仅能控制文本相对于自身x/y坐标的对齐规则，无法读取关联路径的几何信息、自动计算形状的几何中心，因此无法直接对路径元素生效实现文本自动居中。

可行的纯静态实现方案 #

如果可以接受提前手动计算路径中心，不需要动态适配形状变化，可以用下面两种方案实现：

方案1：直接手动指定文本坐标 #

针对你给出的扇形路径示例，提前计算出其几何中心约为(330, 125)，直接给文本元素设置对应的x/y值即可，修改后完整代码如下：

<svg width="600" height="600">
  <!-- 椭圆示例 -->
  <g transform="translate(120,140)">
    <ellipse cx="0" cy="0" rx="100" ry="50" stroke="#aaa" stroke-width="2" fill="#fff"></ellipse>
    <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text>
  </g>

  <g>
    <path d="M250 250 L250 0 A250,250,0,0,1,466.50635094610965,124.99999999999997  L250 250 Z" fill="#ddd" stroke="#ddd"></path>
    <!-- 手动设置路径中心点坐标，搭配已有对齐属性即可实现居中 -->
    <text x="330" y="125" style="font-size: 24px;" text-anchor="middle" alignment-baseline="middle">
test text
    </text>
  </g>
</svg>

方案2：分组统一变换适配后续位置调整 #

如果后续需要调整形状的位置，可以将路径和文本放到同一个g标签下，把路径的坐标原点平移到自身几何中心，文本直接设置x="0" y="0"，后续移动位置仅需修改g标签的transform属性即可，不需要单独调整文本坐标。 #

内容的提问来源于stack exchange，提问作者Michael Sorensen