文字默认无描边，需设stroke和stroke-width并fill:transparent才能触发stroke-dasharray动画；CSS无法动态获取真实长度，须用SVG text+JS getTotalLength()或预设安全值（≥预估长1.2倍）；-webkit-text-stroke不生成路径，不支持该动画。
stroke-dasharray 动画为什么文字一动就消失？
因为 stroke-dasharray 本身只作用于描边，而普通文字默认没有描边（stroke 为 none），直接加动画只会让“不存在的线”在算长度、设虚线——结果就是啥也不显示。必须先让文字有可动画的描边路径。
- 给文字加
stroke（哪怕只是#000）且设置stroke-width（如1px） - 同时设
fill: transparent，否则填充色会盖住描边动画 - 用
textLength或 JS 获取真实路径长度更稳，CSS 的getTotalLength()在某些字体/字号下返回 0
怎么用 CSS 算出文字路径总长并启动描边动画？
CSS 本身不能动态读取文字长度，所谓“自动计算”其实是假象——你得靠 SVG <text> + JS 调用 getTotalLength()，或提前估算。纯 CSS 方案只能固定值，容易错位。
- 最稳妥：把文字包进
<svg>，用<text>标签，再用 JS 读textElement.getTotalLength() - 如果坚持纯 CSS，可用
stroke-dasharray: 200; stroke-dashoffset: 200;这类预设值，但换字体/字号就得重调 -
stroke-dasharray值过小会导致动画卡顿或跳帧，建议至少设为预估长度的 1.2 倍
SVG text 和 HTML text + -webkit-text-stroke 有啥区别？
前者能真正走 stroke-dasharray 动画路径；后者只是视觉模拟描边，不生成 SVG 路径，stroke-dasharray 完全无效。
-
-webkit-text-stroke是 CSS 文本修饰，和 SVG 描边无关，加了stroke-dasharray也没反应 - 想用原生 HTML 文字做书写动画，必须用 SVG 包裹，或改用
clip-path+transform模拟（但不是真描边动画） - SVG
<text>支持dominant-baseline、text-anchor等对齐控制，排版更可控
动画卡顿或从中间开始写？检查这三点
描边动画看起来“断”或“偏”，大概率是长度、起点、时机没对齐。
立即学习“前端免费学习笔记（深入）”；
- 确保
stroke-dashoffset初始值 =stroke-dasharray值（例如都设200），否则起点错位 - 动画时长别太短（
0.3s以下易丢帧），配合ease-out比linear更自然 - 文字含空格或连字符时，部分浏览器会把它们算进路径但不渲染，导致长度误判；用
white-space: nowrap+letter-spacing: 0减少干扰
