必须用 getTotalLength() 动态获取路径真实长度并设为 stroke-dasharray 和初始 stroke-dashoffset，硬编码值（如 100）会因长度不匹配导致错位、跳变或动画失效；内联 SVG 是前提，外部引用或未渲染时 getTotalLength() 返回 0。
必须用 stroke-dasharray 和 stroke-dashoffset 配合 CSS 动画，且路径长度必须运行时调用 getTotalLength() 获取——硬编码值在任何实际项目中都会错位、跳变或完全不触发。
为什么直接写 stroke-dasharray: 100 就不动？
浏览器渲染第一帧时，若未显式设置初始 stroke-dasharray 和 stroke-dashoffset，会按默认值（如 stroke-dasharray: none）绘制，导致“闪一下再动”或根本无动画。更关键的是：100 很可能远小于真实路径长度，getTotalLength() 返回的值取决于 SVG 坐标精度、viewBox 缩放、是否含 transform 等，设计稿导出的 SVG 经常返回 0 或异常值。
- 用
background-image加载 →getTotalLength()必然失败，DOM 不可达 - 路径包在
- 多个
怎么正确初始化描边动画的初始状态？
核心不是“怎么写 keyframes”，而是让首帧就处于“完全隐藏”状态。这需要三步同步完成：
- 给
style="stroke-dasharray: X; stroke-dashoffset: X;"（X 是运行时读取的真实长度） - 确保基础样式已声明：
stroke: currentColor、fill: none、stroke-width: 2，避免继承干扰 - 动画只驱动
stroke-dashoffset从 X → 0；不要同时 animatingstroke-dasharray
示例（JS 注入）：
const path = document.querySelector('#check-path');
const len = path.getTotalLength();
path.style.setProperty('stroke-dasharray', len);
path.style.setProperty('stroke-dashoffset', len);
如何用 CSS 实现平滑的“绘制感”动画？
关键在 @keyframes 定义和终态保持：
- 动画时长建议 ≥ 0.4s，太短易卡顿，移动端尤其明显
- 必须加
animation-fill-mode: forwards，否则动画一结束就回退到初始偏移，描边消失 - 方向反了？路径绘制方向（如
d="M100,50 L0,50"）和stroke-dashoffset减小方向冲突 → 改用负向动画：from { stroke-dashoffset: 0; } to { stroke-dashoffset: -X; } - 多路径协调？给每个
animation-delay
CSS 示例：
@keyframes draw {
to { stroke-dashoffset: 0; }
}
.path {
animation: draw 0.8s ease-out forwards;
}
内联 SVG 是不可绕过的前提
所有方案都依赖直接操作 SVG DOM 节点。用 、、 引用外部资源，或通过构建工具自动注入 SVG，只要最终 HTML 中没出现原始 getTotalLength() 就拿不到值，CSS 也无法穿透作用域。
React/Vue 项目优先选提供内联组件的图标库（如 Heroicons 的 Icon）；纯 HTML 项目必须手动复制 SVG 源码，删掉无意义 width/height 属性，并确认 下。
最容易被忽略的点：窗口 resize 后路径缩放，getTotalLength() 值会变——响应式场景下必须监听 resize 并重算重设，不能只在页面加载时跑一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
