svg的标签将文本作为图形元素处理，需通过x/y定位基线起点，用text-anchor和dominant-baseline控制对齐，以实现多行与富文本，兼顾响应式与可访问性。
SVG 中的 <text></text> 标签不是简单地“写文字”，而是把文本当作图形元素来处理——它有坐标、变换、填充、描边，还能参与裁剪和蒙版。定位与对齐行为也和 HTML/CSS 的文本流完全不同，必须明确指定位置或使用属性控制。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
基础定位：x、y 属性决定基线起点
<text></text> 的 x 和 y 属性指定的是**文本第一字符的基准点（baseline origin）位置**，不是左上角。默认情况下，这个点落在字体基线上、字符左边缘附近（具体取决于字体度量）。
- 单个值（如 x="50"）表示所有字符共用同一 x 坐标，适合垂直排列或等距标签；
- 多个值（如 x="10 30 50"）可为每个字符/子串单独设定 x 位置，常用于微调字间距或制作错位效果；
- y 同理，但更关键：它控制整行文本在垂直方向上的“落点”，修改 y 是调整文本上下位置最直接的方式。
对齐控制：text-anchor 与 dominant-baseline
text-anchor 控制水平对齐方式，作用于 x 所指的基准点：
- start（默认）：基准点 = 字符左端（从左向右书写时）；
- middle：基准点 = 文本水平中心；
- end：基准点 = 字符右端。dominant-baseline 控制垂直对齐基准线，默认为 alphabetic（对应字母基线），常见取值包括：
- hanging：适合中日韩文字，基准点接近汉字顶部；
- middle：以整个文本框高度中心为参考；
- ideographic：更贴近汉字字面框底部；
- text-before-edge 或 text-after-edge：配合 alignment-baseline 可实现类似 CSS 的 flex 垂直居中逻辑。
多行文本：tspan 实现换行与局部样式
SVG 本身不支持自动换行，需用 <tspan></tspan> 拆分内容并手动定位：
- 每个 <tspan></tspan> 可设独立的 x、y、dx、dy；
- dy 是相对于前一个 <tspan></tspan> 的垂直偏移（推荐用 dy 而非重复设 y，便于维护行高）；
- dx 用于水平微调单个词的位置，例如让标点悬出或缩进首行；
- <tspan></tspan> 可嵌套，也可单独设置 fill、font-size 等样式，实现同一段文本内的富文本效果。
响应式与可访问性提醒
SVG 文本不会随容器缩放而自动调整字号（除非用 vw 单位或 JS 监听 resize），建议：
- 对图标内文字，优先用固定像素值并配合 vector-effect="non-scaling-stroke"（虽不适用于 fill）；
- 需缩放时，用 transform="scale()" 整体缩放 <text></text> 元素；
- 添加 role="text" 和 aria-label 提升读屏器识别率，特别是当文本仅为装饰或无实际语义时；
- 避免纯图片式 SVG 文本（如转曲后导出），否则丧失可选、可搜索、可翻译能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
