SVG中TextPath居中时字符缺失问题及修复咨询

在SVG中使用startOffset或text-anchor属性设置TextPath居中时，会出现字符缺失的情况（比如示例里的1234直接消失），需求是让文字在圆形路径上完整居中显示。

问题根源 #

原代码存在几个关键问题：

• 嵌套的<svg>元素添加了transform="matrix(1,0,0,1,500,500)"，导致坐标系统混乱，部分文字被移出可视区域
• 错误使用startOffset="25%"，结合text-anchor="middle"时，文字起始位置计算偏差，前半部分字符被截断
• 多余的<tspan>标签带来不必要的对齐属性干扰

修复方案 #

直接调整以下几点，就能实现文字在圆形路径上完整居中：

1. 移除嵌套的<svg>元素，简化SVG结构，避免坐标变换混乱
2. 将startOffset设为50%，配合text-anchor="middle"，让文字中点对齐路径的中点
3. 去掉多余的<tspan>，直接在<textPath>内写入文本
4. 调整元素层级，将<defs>放在根SVG最上方，符合SVG规范

修复后的完整代码 #

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" style="width: 100%;">
  <defs>
    <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="SvgjsLinearGradient1001">
      <stop stop-color="#007cf0" offset="0"></stop>
      <stop stop-color="#ff0080" offset="1"></stop>
    </linearGradient>
  </defs>
  <g font-size="40" font-weight="800">
    <rect width="300" height="300" x="350" y="350" fill="#ffddff"></rect>
    <path d="M 500,500 m -100,0 a 100,100 0 1,0 200,0 a 100,100 0 1,0 -200, 0" fill="transparent" stroke="black" id="SvgjsPath1000"></path>
    <text>
      <textPath xlink:href="#SvgjsPath1000" fill="url(#SvgjsLinearGradient1001)" startOffset="50%" text-anchor="middle">
        1234567890ABCDEFGHIJK
      </textPath>
    </text>
  </g>
</svg>

关键修改说明 #

• 删掉嵌套<svg>，所有元素直接放在根SVG下，避免坐标偏移导致文字被移出视口
• startOffset="50%"让文字的对齐点（因text-anchor="middle"，即文字中点）落在路径中点，完美实现居中
• 移除冗余的tspan和svgjs属性，减少渲染干扰，逻辑更清晰

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