SVG中text的y坐标对应alphabetic baseline，中文需用dominant-baseline="hanging"配合text-anchor="middle"实现稳定居中，换行必须用tspan，路径文字仅支持path元素。
SVG <text> 的 x/y 坐标不是左上角，而是基线起点
设 y="20" 时，文字不会“顶着”这条线显示，而是字母 x 的底部（alphabetic baseline）落在 y=20 处；大写字母（如 H）会向上延伸，g/j/p 会向下探出。这就导致：字体越大，越容易被截断在画布上方；中文默认下沉明显，看起来像“飘”在坐标线下方。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式设置
font-size后，y值通常取font-size × 1.2左右更稳妥（例如font-size="16"时，y="20"） - 避免依赖默认
font-family，中文务必声明如font-family="sans-serif"或具体 Web 字体名，否则可能 fallback 到等宽字体或缺失 -
x和y支持单值（整段对齐）、多值（逐字定位），如x="10 30 50"可微调每个汉字间距
text-anchor 和 dominant-baseline 必须配对使用才能真正居中
单独设 text-anchor="middle" 只控制水平中心对齐 x 坐标，但垂直方向仍按默认的 alphabetic 基线落点——这对中文几乎总是偏下；同理，只设 dominant-baseline="middle" 会让文字上下浮动，因为水平锚点仍是 start。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 要视觉居中，必须同时写：
text-anchor="middle" dominant-baseline="middle"，此时x="100" y="100"真正指向文本框中心 - 中文排版更稳的组合是：
dominant-baseline="hanging"（对齐汉字顶部） +text-anchor="middle" - 避免用
central或ideographic：前者行为不一致，后者在部分浏览器中支持弱，且与 font metrics 实际偏差大
换行必须用 <tspan>，不能靠 \n 或 CSS
<text> 完全忽略换行符 \n，也不响应 white-space、width 或 display: block。试图用 <div> 套在 SVG 里模拟换行，结果只是 DOM 叠层，缩放后错位、不可选、非矢量。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每行内容包一个
<tspan>，首行可省略dy，后续统一用dy="1.2em"（单位不能省，否则部分浏览器失效） - 所有
<tspan>保持相同x值，配合text-anchor="middle"实现整体水平居中 - 动态内容需 JS 测量：先塞进隐藏
<foreignObject>或临时<canvas>计算宽度，再按字符/词切分并生成<tspan>序列
<textPath> 只认 <path>，<circle> 或 <ellipse> 引用会静默失败
想让文字沿圆弧排列，直接写 <circle id="arc"></circle><textPath href="#arc">文字</textPath> —— 这段代码不会报错，但文字根本不出现在页面上。浏览器只解析 <path> 元素的 id，其他图形类型不被支持。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 曲线路径必须用
<path d="...">显式定义，并赋予唯一id，再通过href="#id"引用 - 居中对齐路径文字：用
startOffset="50%"+text-anchor="middle"，不要依赖路径长度手动算像素偏移 - 调试时给路径加
stroke="red" fill="none"，确认轨迹可见；尖锐拐角（曲率半径 < 20px）易导致文字断裂，优先用Q或C命令绘制平滑贝塞尔曲线
dominant-baseline="hanging" 在 macOS 和 Windows 上对汉字顶部的对齐精度能差 2px，而这种偏差在高缩放倍率下会被放大。别指望一次写完就跨平台完美，得留出微调余量。 
