纯css无法实现文字真正沿圆排列，必须用svg的定义圆弧轨迹并配合绑定文字，且需用a命令绘制路径、startoffset="50%"与text-anchor="middle"配合居中，响应式需保持viewbox宽高比一致。
纯 CSS 无法让文字真正沿圆排列，必须用 SVG + textPath
很多人搜“CSS 圆形文字”，结果套一堆 transform: rotate() + 绝对定位，最后发现文字歪斜、换行失效、缩放错位——那不是圆弧排列，只是视觉近似。真实沿圆周等距、对齐、可响应的方案，只有一条路：<svg></svg> 容器内用 <path></path> 定义圆弧轨迹，再用 <textpath></textpath> 绑定文字。浏览器原生支持，无需 JS，但路径必须是 <path></path>，不能是 <circle></circle>。
textPath 必须引用带 id 的 <path></path>，且 d 属性要用 A 命令画圆弧
常见错误是直接写 <circle r="100"></circle> 然后想用 href="#myCircle" ——<textpath></textpath> 不认 <circle></circle>，只接受 <path></path> 的 id。圆弧路径推荐用 SVG 的 A（arc）命令，控制精准：
-
d="M 200,100 A 100,100 0 0,1 200,300"：从 (200,100) 开始，画半径 100 的下半圆（终点 (200,300)） - 第三个参数
0是 x-axis-rotation，通常设为0；第四个0表示小弧（0），1表示大弧（完整圆需两个A段拼接） - 起始点
M坐标必须和你想让文字开始的位置一致，否则startOffset很难调准
文字居中显示要靠 startOffset="50%" + text-anchor="middle" 配合
只设 startOffset="50%"，文字还是左对齐贴在路径中点上；只设 text-anchor="middle"，文字又会从路径起点就以中心锚定，整体偏左。两者必须同时用：
-
startOffset="50%"：让文字“起始位置”落在路径总长度的 50% 处 -
text-anchor="middle"：作用于<textpath></textpath>内部，使文字以自身中心为基准对齐该位置 - 若文字过长超出圆周，不会自动截断或换行，只能手动缩短、调小
font-size，或改用更小半径
响应式下保持圆弧比例的关键是固定 viewBox 和宽高比
用 width/height 百分比或 vw 设置 SVG 尺寸时，如果没锁住 viewBox，缩放会导致圆变椭圆、文字挤压。正确做法：
-
<svg viewbox="0 0 400 400" width="100%" height="auto"></svg>——viewBox定义坐标系，宽高比必须一致（如 400×400） - 所有
<path></path>坐标基于该viewBox，比如圆心 (200,200)、半径 100 - 避免在
<path></path>的d属性里混用绝对像素值和相对单位，统一用viewBox内坐标
最容易被忽略的是路径方向与文字朝向的关系：默认文字正立排布，若路径是上半圆，文字会“倒挂”在上方；需要加 rotate 属性或调整 path 的起始/终点顺序来修正。这不是 bug，是 SVG 路径绘制方向决定的文本基线走向。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
