文字默认无描边，需设stroke和stroke-width并fill:transparent才能触发stroke-dasharray动画；CSS无法动态获取真实长度，须用SVG text+JS getTotalLength()或预设安全值（≥预估长1.2倍）；-webkit-text-stroke不生成路径，不支持该动画。
stroke-dasharray 动画为什么文字一动就消失？
因为
本身只作用于描边，而普通文字默认没有描边（
为 none），直接加动画只会让“不存在的线”在算长度、设虚线——结果就是啥也不显示。必须先让文字有可动画的描边路径。
给文字加
（哪怕只是
）且设置
（如
）
同时设
，否则填充色会盖住描边动画
用
或 JS 获取真实路径长度更稳，CSS 的
在某些字体/字号下返回 0
怎么用 CSS 算出文字路径总长并启动描边动画？
CSS 本身不能动态读取文字长度，所谓“自动计算”其实是假象——你得靠 SVG
+ JS 调用
，或提前估算。纯 CSS 方案只能固定值，容易错位。
最稳妥：把文字包进
，用
标签，再用 JS 读
如果坚持纯 CSS，可用
这类预设值，但换字体/字号就得重调
值过小会导致动画卡顿或跳帧，建议至少设为预估长度的 1.2 倍
SVG text 和 HTML text + -webkit-text-stroke 有啥区别？
前者能真正走
动画路径；后者只是视觉模拟描边，不生成 SVG 路径，
完全无效。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
是 CSS 文本修饰，和 SVG 描边无关，加了
也没反应
想用原生 HTML 文字做书写动画，必须用 SVG 包裹，或改用
+
模拟（但不是真描边动画）
SVG
支持
、
等对齐控制，排版更可控
动画卡顿或从中间开始写？检查这三点
描边动画看起来“断”或“偏”，大概率是长度、起点、时机没对齐。
立即学习
“
前端免费学习笔记（深入）
”；
确保
初始值 =
值（例如都设
），否则起点错位
动画时长别太短（
以下易丢帧），配合
比
更自然
文字含空格或连字符时，部分浏览器会把它们算进路径但不渲染，导致长度误判；用
+
减少干扰
文字路径长度不是“写死就行”的参数，它依赖字体加载状态、渲染时机、甚至系统字体回退——上线前务必在真实设备上测不同字号和中英文混排场景。
stroke-dasharraystrokestroke#000stroke-width1pxfill: transparenttextLengthgetTotalLength()getTotalLength()textElement.getTotalLength()stroke-dasharray: 200; stroke-dashoffset: 200;stroke-dasharraystroke-dasharraystroke-dasharray-webkit-text-strokestroke-dasharrayclip-pathtransformdominant-baselinetext-anchorstroke-dashoffsetstroke-dasharray2000.3sease-outlinearwhite-space: nowrapletter-spacing: 0