SVG的标签是唯一原生矢量文字实现，x/y定位首字符基线起点而非左上角，需用text-anchor和dominant-baseline控制对齐，多行用，中文须UTF-8编码+显式font-family，内联嵌入保障可选可缩放。

SVG 的 标签本身就是矢量文字的原生实现方式——它不是“模拟”矢量，而是真正作为图形元素参与坐标系、变换和渲染管线。只要不转曲、不导出为位图，文字就始终可缩放、可选中、可搜索、不失真。

用对坐标和基线，文字才不飘不截

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 不解析换行符，也不支持自动折行。所有换行、颜色变化、字号调整都必须显式用 分段。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 首行设 y，后续行统一用 dy 控制行距（如 dy="1.4em"），避免重复计算 y 值出错
• 所有 共享同一 x 值，再配 text-anchor="middle"，才能整体水平居中
• 可单独设 fill、font-size、opacity，实现同一段里的样式切换
• 注意单位：dy="1.4em" 或 dy="22" 必须带单位，省略在部分浏览器中无效

艺术化效果靠组合图形能力

矢量化排版的价值不仅在于清晰，更在于能像操作路径一样操控文字：

• 用 fill="url(#grad)" 引用预定义的 或 实现渐变/纹理填充
• 加 filter="url(#shadow)" 添加阴影、模糊、发光等滤镜效果
• 沿曲线排字用 ，配合 startOffset="50%" 居中对齐路径
• 文字可被 裁剪、被 半透明遮罩、甚至参与 transform="rotate(30)"

嵌入方式决定是否真矢量

再精美的 ，如果嵌入方式错误，也会退化成位图：

• ✅ 正确：HTML 中直接内联写 ，或用
• ❌ 错误：用 或 CSS background-image，文字将不可选、不可缩放、放大后模糊
• 中文务必声明 font-family（如 "Microsoft YaHei", sans-serif），避免系统 fallback 导致字体异常
• 确保文件编码为 UTF-8 无 BOM，否则中文可能乱码或渲染失败

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