纯 CSS 无法实现真正的环形文字排版，必须使用 SVG 的 <textPath> 绑定 <path> 路径；<circle> 不能直接作为路径，需用 A 命令手动绘制圆弧路径，配合 startOffset="50%" 和 text-anchor="middle" 实现居中对齐，并注意 viewBox、CSS 尺寸与路径起点方向的精确控制。
纯 CSS 做不了真正的环形文字排版，必须用 SVG 的 <textPath> 绑定 <path> 路径——这是唯一被所有现代浏览器原生支持、可响应、能对齐基线的方案。
为什么<circle>不能直接当路径用
<textPath> 的 href 属性只认 <path> 元素的 id，写成 <circle id="myCircle"> 再配 href="#myCircle" 会静默失败，文字退化为普通水平渲染，控制台也不报错。
- 必须把圆转成
<path>：用 SVG 的A（arc）命令拼出完整圆，例如半径 90、圆心在 (100,100) 的写法是d="M 10,100 A 90,90 0 1,1 190,100 A 90,90 0 1,1 10,100" - 不要用
Z闭合路径——<textPath>对闭合路径支持不稳定，两段A拼接更可靠 - 路径
d属性里不能有全角空格、中文逗号或单位混用（如50px写成50 px），否则整个路径解析失败
startOffset 和 text-anchor 必须一起设
只设 startOffset="50%"，文字还是左对齐贴在路径中点；只设 text-anchor="middle"，文字会以自身中心为锚点从路径起点开始排布，整体偏左。两者缺一不可。
-
startOffset="50%"：让文字序列的几何中心对齐路径总长的 50% 位置 -
text-anchor="middle"：作用于<textPath>内部，使该对齐点真正落在文字视觉中心 - 如果文字过长超出路径长度，不会折行或隐藏，而是直接溢出——这时得调小
font-size、缩短文本，或增大路径半径
响应式下容易崩的三个点
环形文字在缩放时错位，90% 是因为没管好 viewBox 和 CSS 尺寸的配合关系。
立即学习“前端免费学习笔记（深入）”；
-
viewBox必须保持宽高比一致（如"0 0 200 200"），否则圆变椭圆，文字拉伸变形 - SVG 容器的 CSS
width/height应设为具体值或百分比，避免用em或rem导致父容器字体变化时意外缩放 - 不要对
<path>或整个<svg>用transform: scale()——它缩放坐标但不缩放字体渲染逻辑，字符会“滑出”路径
最麻烦的不是画圆，而是路径起点和文字起始方向对不上：比如想让文字从顶部开始顺时针排布，就得确保 M 坐标是圆顶点，且第一段 A 命令的弧方向正确。这点没法靠 CSS 补救，必须手调 d 属性。
