必须用 path.getTotalLength() 动态获取路径真实长度并注入 stroke-dasharray 和 stroke-dashoffset 初始值，硬编码或目测数值会导致动画跳变、卡顿、不触发或描一半就停。
必须用 path.getTotalLength() 动态获取路径真实长度并注入 stroke-dasharray 和 stroke-dashoffset 初始值，硬编码或目测数值会导致动画跳变、卡顿、不触发或描一半就停。
为什么动画根本不动或只闪一下？
核心不是 CSS 写错了，而是 SVG 渲染管线没对齐。典型现象和对应修复：
- 第一帧闪一下再动 →
<path>上没预设style="stroke-dasharray: X; stroke-dashoffset: X;"，浏览器按默认值（stroke-dasharray: none）渲染首帧 -
getTotalLength()返回0→ SVG 尚未 layout 完成，或路径来自<use>引用；改用requestAnimationFrame延迟一次读取比等load更可靠 - 动画卡在 70% 或描出界 →
stroke-dasharray值小于实际路径长度；必须用运行时getTotalLength()，不能填 100、200 这类整数
内联 SVG 是不可绕过的前提
用 <img src="icon.svg">、CSS background-image、<object> 或 <iframe> 加载 SVG，stroke-dashoffset 动画完全无效——外部文件的 DOM 不可访问，CSS 无法穿透作用域。
必须把 SVG 代码直接写进 HTML：<svg><path d="M0,0 L100,100"></svg>。若用图标库（如 Heroicons），优先选 React/Vue 组件版（默认内联）；若只有 SVG 文件，需手动转为内联代码。
立即学习“前端免费学习笔记（深入）”；
如何正确初始化 stroke-dasharray 和 stroke-dashoffset？
关键不是“怎么写动画”，而是“怎么初始化”：路径长度必须运行时获取，且要配对使用。
-
stroke-dasharray设为路径总长（如120），等价于120, 120—— 确保只有一段实线，空白段 ≥ 总长即可 -
stroke-dashoffset初始也设为该长度（如120），让实线段完全偏移出视区，路径不可见 - CSS 动画只需驱动
stroke-dashoffset从总长减到0；别试图同时动stroke-dasharray - 必须显式声明基础样式：
stroke: currentColor、fill: none、stroke-width: 2，避免继承干扰 - 加
animation-fill-mode: forwards，否则动画结束立即回退，描边消失
多路径或文字转路径时容易忽略的细节
文字必须先转为 <path>（Figma/Illustrator “轮廓化”，或 opentype.js 生成），<text> 元素无法做描边动画。
多个路径需分别计算长度、单独设 class，并用 animation-delay 控制顺序；若想动画结束后显示填充色（如白色文字），不能靠独立延迟动画，而应在同一 @keyframes 中分阶段控制：50% 完成描边，100% 清除 stroke 并设 fill: white —— 否则 fill 会被 stroke 掩盖或时机错位。
