移动端SVG路径动画不显示的根本原因是getTotalLength()在iOS Safari等环境下常返回0，导致stroke-dasharray设为0,0；须等待SVG渲染完成（如用requestAnimationFrame或IntersectionObserver）再获取长度。
移动端SVG路径动画不显示，大概率是stroke-dasharray没算对或没生效
直接说结论：不是CSS写法错，而是getTotalLength()在移动端（尤其iOS Safari）常返回0，导致stroke-dasharray设成0, 0，路径“看不见”——动画根本没起点。
根本原因在于SVG元素未完全加载、未渲染完成，或被包裹在display: none、visibility: hidden容器里，getTotalLength()就不可靠。别信“只要DOM存在就能取长度”这种直觉。
- 务必等SVG已渲染到视口内再计算长度（比如监听
DOMContentLoaded+requestAnimationFrame或IntersectionObserver） - 避免在
document.addEventListener('DOMContentLoaded')里立刻调用getTotalLength()，此时SVG可能还没布局 - iOS Safari对
引用的路径、内联中动态插入的
怎么安全获取stroke-dasharray值
不要手写固定数值，也不要依赖一次性的JS计算。推荐两种实操方案：
- 用CSS自定义属性+
attr()兜底：在data-length="123"，CSS里写stroke-dasharray: attr(data-length);（注意：仅Chrome/Edge支持，iOS Safari不支持attr()用于数值，慎用） - 更稳妥的是JS重试机制：
function safeGetLength(path) { const len = path.getTotalLength(); if (len === 0 && document.visibilityState === 'visible') { return new Promise(resolve => { requestAnimationFrame(() => resolve(safeGetLength(path))); }); } return len; }然后在load或resize后调用，并用Promise.resolve()统一处理 - 如果路径是静态的（不随数据重绘），直接用设计工具（Figma/Sketch）导出时勾选“优化SVG”，或用SVGO命令行跑一遍：
svgo --precision=1 input.svg，它会把d属性转成紧凑格式，getTotalLength()成功率大幅提升
stroke-dashoffset动画卡住不动？检查CSS动画触发条件
即使stroke-dasharray设对了，动画也可能“静止”。常见原因是：
- CSS动画没有真正触发：iOS Safari对
@keyframes中只改stroke-dashoffset但不改stroke-dasharray的动画兼容性差，建议同时声明transform: translateZ(0)强制硬件加速 - 路径
stroke颜色为transparent或rgba(0,0,0,0)，看起来像没动，其实动了——先确认stroke可见 - 父级
overflow: hidden裁掉了路径起始段，stroke-dashoffset初始值太大，第一帧就移出可视区，加overflow: visible临时排查 - 动画
fill-mode: forwards没设，动画结束立即回退，看起来“闪一下就没了”
真机调试时看不到动画，优先查这些
别急着重写逻辑，先快速验证底层是否通：
- 在Safari开发者工具里，选中
$0.getTotalLength()，看返回值是不是正数；如果不是，说明SVG没ready - 临时加一句
console.log($0.style.strokeDasharray)，确认CSS变量或JS赋值是否真写进style属性 - 把动画拆成两步：先用JS设
path.style.strokeDashoffset = '100'，看路径是否明显缩短；再设'0'，看是否恢复——这能排除路径本身是否可绘制 - 换用
SMIL动画测试（如
移动端SVG路径动画最脆弱的环节永远在“长度获取时机”和“CSS动画触发链路”，而不是语法本身。多一个requestAnimationFrame重试，比反复调参数有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
