textpath是唯一能真正让文字沿圆弧自然排列的方案，必须绑定元素（不支持等），需用a命令定义圆弧路径，配合startoffset与text-anchor="middle"协同控制起始位置和对齐，且依赖viewbox实现响应式稳定。
textPath 是唯一能真正让文字沿圆弧自然排列的方案，纯 CSS 做不到——那些 transform + rotate 逐字定位的写法，换行失效、缩放错位、无法 baseline 对齐，不是环形排版，只是视觉凑数。
为什么 textPath 必须绑定 <path></path>，不能用 <circle></circle>
浏览器只认 <path></path> 元素的 id，<circle></circle>、<ellipse></ellipse>、<rect></rect> 都不被支持。哪怕你写了 <circle id="myCircle"></circle>，再在 <textpath href="#myCircle"></textpath> 里引用，文字也会直接回退成直线渲染，控制台还不报错。
-
<path></path>的d属性必须用A（arc）命令写圆弧，例如：d="M 100,100 A 90,90 0 1,1 100,100"表示一个完整圆（两个半圆拼接） - 起始点
M坐标要和你想让文字开始的位置一致，否则startOffset很难调准 - 路径本身
fill="none"即可，不需要描边或填充，它只作“轨道”用
startOffset 和 text-anchor="middle" 必须一起用才能居中
只设 startOffset="50%"，文字还是左对齐贴在路径中点上；只设 text-anchor="middle"，文字又会从路径起点就以中心锚定，整体偏左。二者缺一不可。
-
startOffset控制文字在路径上的起始位置，值为百分比时按路径总长度计算 -
text-anchor="middle"必须写在<textpath></textpath>标签内，不是<text></text>上 - 如果文字太长超出路径，超出部分会被裁剪，不会自动换行或折行
响应式下容易崩的三个点
环形文字在缩放时错位，90% 是因为 viewBox 和 CSS 尺寸没配对好。
-
<svg></svg>必须用viewBox（如viewBox="0 0 200 200"），不能只靠width/height控制尺寸 - CSS 中给
<svg></svg>设width: 100%; height: auto;，同时确保容器宽高比固定，否则圆变椭圆 - 不要对
<path></path>或整个<svg></svg>使用transform: scale()，这会破坏路径坐标与字体大小的映射关系
textPath 就静默失效；href 多个空格、少个 #，文字就掉回直线——这些地方没有错误提示，但效果直接消失。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
