纯CSS无法实现真正手绘顺序描边动画，但可用stroke-dasharray与stroke-dashoffset模拟一笔画完效果；必须内联SVG、动态获取getTotalLength()、配合filter强化冷灰手绘质感。
纯 CSS 做不出真正“手绘顺序”的描边动画（比如先画左眼再画右眼），但能用 stroke-dasharray + stroke-dashoffset 模拟出线条从起点到终点“一笔画完”的生长效果，视觉上足够接近手绘感——关键不在路径顺序，而在起始/结束的质感控制。
必须用内联 SVG，不能用 <img>
SVG 描边动画依赖 CSS 直接控制 path 元素的样式属性，<img src="icon.svg"> 是隔离的文档上下文，CSS 无法穿透。只能用内联写法：
- 把 SVG 代码直接贴进 HTML，保留
<path>标签 - 确保每个
<path>有stroke、stroke-width和fill="none" - 避免在 SVG 外层加
display: none或visibility: hidden，否则getTotalLength()会返回 0
stroke-dasharray 和 stroke-dashoffset 怎么配才不卡
常见错误是手填固定数值（如 stroke-dasharray: 100），结果动画停在半路或直接跳变。真实长度必须动态获取：
- 在控制台执行
$0.getTotalLength()（选中 path 后运行），比抄网上的估算值可靠十倍 -
stroke-dasharray设为测得的长度 L，例如124.7；stroke-dashoffset初始也设为 L - 动画终点设为
stroke-dashoffset: 0，不是负数、不是百分比、不要四舍五入成整数 - 如果路径带
transform（比如缩放），getTotalLength()仍返回原始长度，需手动乘以缩放系数
让线条有“手绘感”，不是靠动画而是靠终态滤镜
描边动画本身是机械的，手绘感来自线条的视觉特征：轻微抖动、边缘毛糙、灰阶偏冷。CSS 无法模拟抖动，但可用 filter 强化质感：
立即学习“前端免费学习笔记（深入）”；
- 动画结束后，给
<path>加filter: contrast(1.6) brightness(0.92) saturate(0.3) - 避免用
sepia()或hue-rotate()，它们会让线条发黄，破坏铅笔稿的冷灰调 - 若想强化“笔触粗细变化”，可对不同 path 分段设置不同
stroke-width，再分别动画（需 JS 控制 delay） - 别在同一个元素上叠加
blur()或scale()动画——它们会触发全图层重绘，和描边动画抢资源，导致掉帧
最易被忽略的一点：动画播完后，stroke-dashoffset: 0 虽然显示完整，但线条仍是“机器绘制”的光滑直线。真正的手绘感，藏在你停帧后加的那三行 filter 里——它不参与动画，却决定了用户记住的是“画完了”，还是“刚手绘完”。
