SVG的标签是唯一原生矢量文字实现，x/y定位首字符基线起点而非左上角，需用text-anchor和dominant-baseline控制对齐，多行用，中文须UTF-8编码+显式font-family，内联嵌入保障可选可缩放。
SVG 的 <text></text> 标签本身就是矢量文字的原生实现方式——它不是“模拟”矢量，而是真正作为图形元素参与坐标系、变换和渲染管线。只要不转曲、不导出为位图，文字就始终可缩放、可选中、可搜索、不失真。
用对坐标和基线，文字才不飘不截
SVG 中 x 和 y 指的是**首字符基线起点**，不是左上角，也不是文字框中心。设 y="16"（对应 font-size="16"）常导致汉字顶部或大写字母被裁掉。
-
y值建议比font-size略大：如font-size="16"时，y="20"更稳妥 - 中文排版优先用
dominant-baseline="hanging"，此时y接近汉字顶部，控制更直观 - 想视觉垂直居中于某高度（比如容器高 100px），配合
dominant-baseline="middle"+y="50" - 水平居中靠
text-anchor="middle"，此时x="100"表示整段文字中心落在 x=100 处
多行与富文本靠 手动拆解
SVG 不解析换行符，也不支持自动折行。所有换行、颜色变化、字号调整都必须显式用 <tspan></tspan> 分段。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 首行设
y，后续行统一用dy控制行距（如dy="1.4em"），避免重复计算y值出错 - 所有
<tspan></tspan>共享同一x值，再配text-anchor="middle"，才能整体水平居中 -
<tspan></tspan>可单独设fill、font-size、opacity，实现同一段里的样式切换 - 注意单位：
dy="1.4em"或dy="22"必须带单位，省略在部分浏览器中无效
艺术化效果靠组合图形能力
矢量化排版的价值不仅在于清晰，更在于能像操作路径一样操控文字：
立即学习“前端免费学习笔记（深入）”；
- 用
fill="url(#grad)"引用预定义的<lineargradient></lineargradient>或<pattern></pattern>实现渐变/纹理填充 - 加
filter="url(#shadow)"添加阴影、模糊、发光等滤镜效果 - 沿曲线排字用
<textpath href="#myPath"></textpath>，配合startOffset="50%"居中对齐路径 - 文字可被
<clippath></clippath>裁剪、被<mask></mask>半透明遮罩、甚至参与transform="rotate(30)"
嵌入方式决定是否真矢量
再精美的 <text></text>，如果嵌入方式错误，也会退化成位图：
- ✅ 正确：HTML 中直接内联写
<svg><text>…</text></svg>，或用<object data="a.svg"></object> - ❌ 错误：用
<img src="a.svg" alt="HTML5 中 SVG 怎么通过 text 标签实现文字的矢量化排版" >或 CSSbackground-image，文字将不可选、不可缩放、放大后模糊 - 中文务必声明
font-family（如"Microsoft YaHei", sans-serif），避免系统 fallback 导致字体异常 - 确保文件编码为 UTF-8 无 BOM，否则中文可能乱码或渲染失败
