SVG text坐标原点在左上角，x/y指向基线起点；需设y略大于font-size、用dominant-baseline和text-anchor居中；必须内联嵌入或object方式保障可选可缩放；换行用tspan，中文需UTF-8编码+显式字体。
text 元素的基本位置与坐标系怎么设才不偏移
SVG 的 text 坐标原点在左上角，x 和 y 指的是“基线起点”（baseline start），不是文字左上角——这点和 CSS 完全不同。设 y="20" 时，若字体过大，文字可能被截断在画布上方。
-
y值通常需略大于font-size（比如font-size="16"时，y="20"更稳妥） - 用
dominant-baseline="middle"+text-anchor="middle"可让x/y指向文本中心，避免手动调偏移 - 避免依赖默认
font-family：未声明时浏览器按系统 fallback 渲染，中文可能变成等宽或缺失；显式写font-family="sans-serif"或 Web 字体名更可控
如何让 SVG 文本可选中、可复制、可缩放
关键不在 text 元素本身，而在 SVG 怎么嵌入 HTML。用 <img src="chart.svg"> 或 CSS background-image 会让所有 text 变成位图——用户点不中、Ctrl+F 找不到、放大后锯齿。
- 必须用内联方式：
<svg>...<text>内容</text>...</svg>直接写进 HTML 文件里 - 或用
<object data="chart.svg" type="image/svg+xml"></object>，并确保 SVG 文件 UTF-8 无 BOM - 禁用
<iframe src="chart.svg"></iframe>：跨域时无法用 JS 访问内部text节点，且部分浏览器禁用选择
多行/混排样式文本为什么不能套 div 或 span
SVG 的 text 不解析 HTML，<text><span style="color:red">hello</span></text> 会被当成纯字符串显示，甚至导致整个 text 不渲染。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 换行靠
<tspan></tspan>：每个<tspan></tspan>可独立设x、y、dx、dy、fill - 垂直对齐用
dominant-baseline（值如"text-before-edge"、"middle"），不是 CSS 的vertical-align - 路径贴合用
<textpath></textpath>，但注意xlink:href已废弃，改用href="#path-id"
中文显示异常或乱码的常见原因
不是字体问题就是编码问题。即使写了 font-family="Microsoft YaHei"，如果 HTML 或 SVG 文件本身不是 UTF-8 编码，中文照样变方块或问号。
- HTML 页面必须声明：
<meta charset="UTF-8"> - 外部 SVG 文件保存为 UTF-8（无 BOM）；用 VS Code 等编辑器右下角确认编码格式
- 避免在
text中直接写 HTML 实体（如 - 某些字体不支持中文全角标点，测试时用 “，。！？” 而不只是 ASCII 标点
真正容易被忽略的是：text 的可访问性依赖于整个 SVG 的嵌入方式，而不是单个属性。哪怕 text 写得再标准，塞进 <img> 里就等于废掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
