SVG的text标签将文本视为图形元素，需通过x/y定位基线起点、用text-anchor和dominant-baseline控制对齐、以tspan实现多行、内联嵌入保障可选可缩放。
SVG 的 text 标签不是“写文字”，而是把文字当作图形元素来绘制——它有坐标、能变换、可着色，也能参与裁剪和蒙版。要让它在矢量图中正确显示、居中、换行、支持中文且保持可选可缩放，关键在定位逻辑、对齐控制和嵌入方式。
定位：x/y 指的是基线起点，不是左上角
SVG 中 <text></text> 的 x 和 y 属性定位的是**第一字符的基线起点（baseline origin）**，不是文字框左上角。这点和 CSS 完全不同，直接设 y="16"（font-size=16）往往会让文字被截掉顶部。
-
y值建议设为font-size × 1.25左右（例如 font-size="16" 时，y="20" 更稳妥） - 单个
x值让所有字符共用横坐标；多个值如x="10 30 50"可逐字精调水平位置 - 避免依赖默认
dominant-baseline（默认是alphabetic），中文推荐用dominant-baseline="hanging"或"ideographic"
对齐：用 text-anchor 和 dominant-baseline 精准控制中心点
靠手动调 x/y 很容易偏移，真正稳的居中方式是组合使用两个属性：
-
text-anchor="middle"：让x指向文本水平中心 -
dominant-baseline="middle"：让y指向文本垂直中心（适合整体居中） - 中文标题常用
dominant-baseline="hanging"+text-anchor="middle"，更贴合汉字视觉顶部
多行与样式：用 tspan 替代 div/span
SVG 不解析 HTML 标签。<text><span>hello</span></text> 会原样显示字符串，甚至导致渲染失败。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 每行用一个
<tspan></tspan>，单独设x和y（y递增即可实现行距） -
<tspan></tspan>支持独立样式，比如不同颜色、字号或字体 - 中文必须确保 SVG 文件保存为 UTF-8 无 BOM，并显式声明
font-family（如font-family="sans-serif"或 Web 字体）
嵌入：必须内联或 object，否则文字变位图
用 <img src="chart.svg" alt="HTML SVG 怎么使用 text 标签在矢量图里嵌入排版文本" > 或 CSS background-image，会让所有 <text></text> 失去 DOM 结构——无法选中、复制、搜索、缩放清晰，也不响应 CSS。
- ✅ 推荐方式一：直接内联
<svg>...<text>内容</text>...</svg> - ✅ 推荐方式二：
<object data="chart.svg" type="image/svg+xml"><p>降级提示</p></object> - ❌ 避免
<iframe></iframe>：跨域时 JS 访问受限，部分浏览器禁用文本选择 - ❌ 避免 Base64 内联：难维护、无法缓存、需转义特殊字符
不复杂但容易忽略：text 在 SVG 里是图形，不是流式内容。找准基线、设对锚点、用对嵌入方式，中文排版和响应式缩放就自然可靠了。
