文字沿圆弧排列需用 SVG 的 ，纯 CSS 无法实现；必须通过 定义路径（推荐 A 命令）、 绑定文字，并配合 startOffset 和 text-anchor="middle" 实现居中，响应式需保持 viewBox 宽高比一致。
用 <textpath></textpath> 让文字沿圆弧走，不是纯 CSS 能干的事
纯 CSS 没有“文字沿任意曲线排列”的能力。所谓“CSS 实现圆圈文字”，实际是借道 SVG 的 <textpath></textpath>，再通过 CSS 控制样式（颜色、字体等）。浏览器原生支持该特性，但必须用 SVG 容器 + <path></path> 定义轨迹 + <textpath></textpath> 绑定文字，缺一不可。
常见错误是直接在 HTML 中写 <div> 加 CSS transform 逐字旋转——那只是近似模拟，无法对齐路径、不支持自动换行、响应式下极易错位。
<h3>
<code><path></path> 的 d 属性怎么写圆？用 arc 命令最稳
圆弧路径必须用 SVG 的 d 属性定义，arc（A）命令比 circle 元素更可控：它能指定起始/终止角度、是否顺时针、是否大弧，且 <textpath></textpath> 只认 <path></path>，不接受 <circle></circle>。
- 画一个半径 100、圆心在 (200,200) 的完整圆圈：
d="M 300,200 A 100,100 0 1,1 100,200 A 100,100 0 1,1 300,200" - 只取上半圆（0°→180°）：
d="M 100,200 A 100,100 0 0,1 300,200"（注意0,0,1中第三个 1 表示大弧，这里实际是小弧，需按需调整） - 起始点必须和文字起点对齐：文字默认从路径起点开始排布，若想让文字居中显示在圆上，得手动计算路径起点偏移，或用
startOffset属性微调
startOffset 和 text-anchor 配合才能真正居中
光靠 <textpath></textpath> 把文字“挂”上去还不够，文字常会贴着路径起点挤在一起。要视觉居中，必须组合两个属性：
立即学习“前端免费学习笔记（深入）”；
-
startOffset：控制文字在路径上的起始位置，值可为像素（如"50"）或百分比（如"50%"），设为"50%"是让文字中点对齐路径中点的第一步 -
text-anchor="middle"：作用于<textpath></textpath>内部，让文字以其中心为锚点定位，否则即使startOffset="50%"，文字仍是左对齐，看起来还是偏左 - 如果文字过长超出圆周，不会自动折行或截断，而是溢出路径末端——这时得手动缩短文本，或改用更小的字号
响应式下圆圈文字容易变形？别用固定 viewBox 宽高
SVG 默认不响应式。把 width/height 设为百分比后，若 viewBox 固定（如 viewBox="0 0 400 400"），缩放时圆会压扁或拉伸。正确做法是：
- 保持
viewBox宽高比与容器一致（如圆心在中心，半径为 100，则viewBox="0 0 400 400"是安全的） - 用 CSS 设置 SVG 宽度为
100%，高度用aspect-ratio: 1或padding-bottom: 100%维持正方形 - 路径坐标和
startOffset用相对单位（如百分比）难控制，建议全用绝对数值 + JS 监听 resize 重算路径，或直接用 CSS 自定义属性传入半径，配合calc()动态生成d字符串（较复杂，小项目不推荐）
圆圈文字本质是 SVG 特性，CSS 只负责修饰。最容易被忽略的是：路径方向（顺时针/逆时针）直接影响文字朝向，而 <textpath></textpath> 默认把文字“内侧”贴路径，想让文字朝外，得翻转路径或用 dominant-baseline 微调基线——这一步没调好，文字就倒着长在圆外面。
