SVG的text标签将文本视为图形元素，需通过x/y定位基线起点、用text-anchor和dominant-baseline控制对齐、以tspan实现多行、内联嵌入保障可选可缩放。

SVG 的 text 标签不是“写文字”，而是把文字当作图形元素来绘制——它有坐标、能变换、可着色，也能参与裁剪和蒙版。要让它在矢量图中正确显示、居中、换行、支持中文且保持可选可缩放，关键在定位逻辑、对齐控制和嵌入方式。

定位：x/y 指的是基线起点，不是左上角

SVG 中 的 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 标签。hello 会原样显示字符串，甚至导致渲染失败。正确做法是：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 每行用一个 ，单独设 x 和 y（y 递增即可实现行距）
• 支持独立样式，比如不同颜色、字号或字体
• 中文必须确保 SVG 文件保存为 UTF-8 无 BOM，并显式声明 font-family（如 font-family="sans-serif" 或 Web 字体）

嵌入：必须内联或 object，否则文字变位图

用 或 CSS background-image，会让所有 失去 DOM 结构——无法选中、复制、搜索、缩放清晰，也不响应 CSS。

• ✅ 推荐方式一：直接内联
• ✅ 推荐方式二：
• ❌ 避免 ：跨域时 JS 访问受限，部分浏览器禁用文本选择
• ❌ 避免 Base64 内联：难维护、无法缓存、需转义特殊字符

不复杂但容易忽略：text 在 SVG 里是图形，不是流式内容。找准基线、设对锚点、用对嵌入方式，中文排版和响应式缩放就自然可靠了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！