如何在SVG紫色区域内居中对齐文本

核心问题是你使用固定像素值作为startOffset，这会因不同路径长度导致文本位置偏移。改用百分比结合正确的对齐属性，就能让文本精准居中在目标区域。

修改要点 #

• 将startOffset设为50%，确保文本从路径中点开始排列
• 保留text-anchor="middle"让文本相对于起点居中对齐
• 移除textPath上多余的style="color: #fff"，统一用SVG的fill属性控制文本颜色
• 对于方向特殊的路径，dominant-baseline="central"可确保文本在垂直方向居中

修改后的完整代码 #

CSS代码 #

path:hover {
  fill: #9F1F63;
  cursor: pointer;
}

svg text {
  font-size: 24pt;
  font-weight: 600;
  fill: white;
}

HTML代码 #

<svg width="540" height="540" viewBox="0 0 1260 1260" style="background: #f4f4f8;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="lorem-ipsum" d="M19.6535 473.868C47.9918 363.089 105.946 262.111 187.302 181.761C268.658 101.41 370.349 44.7167 481.472 17.7586L494.995 73.5011C393.989 98.0047 301.557 149.536 227.608 222.571C153.659 295.606 100.982 387.39 75.2235 488.083L19.6535 473.868Z" fill="#58585A" stroke="white" stroke-width="10" mask="url(#path-1-inside-1_4_33)"/>
    <text>
        <textPath xlink:href="#lorem-ipsum" startOffset="50%" text-anchor="middle" dominant-baseline="central">
            Lorem Ipsum
        </textPath>
    </text>
    <path id="dolor-sit" d="M943.948 453.828C974.447 508.179 990.314 569.517 989.995 631.839C989.677 694.162 973.184 755.334 942.132 809.371C911.079 863.407 866.529 908.456 812.843 940.11C759.156 971.764 698.172 988.938 635.857 989.952C573.542 990.966 512.03 975.785 457.343 945.895C402.655 916.004 356.663 872.428 323.869 819.43C291.075 766.433 272.601 705.829 270.255 643.55C267.909 581.271 281.772 519.449 310.487 464.135L354.36 486.91C329.588 534.629 317.629 587.962 319.653 641.689C321.676 695.417 337.614 747.699 365.905 793.419C394.196 839.14 433.872 876.732 481.051 902.518C528.229 928.304 581.294 941.401 635.053 940.526C688.811 939.652 741.422 924.836 787.736 897.528C834.051 870.221 872.483 831.357 899.272 784.741C926.061 738.124 940.289 685.352 940.563 631.587C940.838 577.822 927.15 524.907 900.839 478.019L943.948 453.828Z" fill="#9F1F63" stroke="white" stroke-width="10" mask="url(#path-6-inside-6_4_33)"/>
    <text>
        <textPath xlink:href="#dolor-sit" startOffset="50%" text-anchor="middle" dominant-baseline="central">
            Dolor Sit
        </textPath>
    </text>
    <path id="amet" d="M476.668 407.763C521.185 377.048 573.901 360.411 627.985 360.008C682.069 359.604 735.028 375.452 779.999 405.5L749.393 451.307C713.598 427.391 671.445 414.776 628.396 415.097C585.348 415.418 543.388 428.661 507.954 453.109L476.668 407.763Z" fill="#9F1F63" stroke="white" stroke-width="10" mask="url(#path-11-inside-11_4_33)"/>
    <text>
        <textPath xlink:href="#amet" startOffset="50%" text-anchor="middle" dominant-baseline="central">
            Amet
        </textPath>
    </text>
</svg>

补充说明 #

• 固定像素的startOffset仅适配特定长度的路径，换成50%能自动适配任意路径的中点
• 若文本仍有轻微垂直偏移，可添加dy属性（如dy="3"）进行微调

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