必须用 gettotallength() 获取路径真实长度并动态设置 stroke-dasharray 和 stroke-dashoffset，硬编码或百分比值会导致动画错位、闪动甚至不触发；stroke-dasharray 不支持百分比，只接受数值型长度；内联 svg 是硬性前提，外部加载方式无法触发动画；初始需预设内联样式对齐首帧，响应式缩放后须重算长度。
必须用 getTotalLength() 获取路径真实长度并动态设置 stroke-dasharray 和 stroke-dashoffset，硬编码或百分比值会导致动画错位、闪动甚至不触发。
为什么直接写 stroke-dasharray: 100% 不行
几乎所有现代浏览器（除旧版 IE）都忽略 stroke-dasharray 的百分比值，会静默降级为默认行为——结果通常是描边完全消失，或首帧乱跳。该属性只接受数值型长度（如 246.89），不支持 %、auto 或 inherit。
- 手算路径长度误差大，贝塞尔曲线段无法靠目测估量
- 设计工具（Figma/Sketch）导出的 SVG 常含
transform，但getTotalLength()返回的是原始几何长度——这是正确行为，别试图“修正” - 若路径在
<use></use>或外部<svg></svg>中，getTotalLength()可能返回0；改用requestAnimationFrame延迟一次读取更可靠
内联 SVG 是硬性前提
用 <img src="icon.svg">、CSS background-image、<object></object> 或 <iframe></iframe> 加载 SVG，stroke-dashoffset 动画完全无效——样式无法穿透外部文件作用域，DOM 也不可访问。
- 必须把 SVG 代码直接贴进 HTML，例如：
<svg><path d="M0 0 L100 100"></path></svg> - 图标库如 Heroicons，优先选 React/Vue 组件版（默认内联）；若只有 SVG 文件，需手动转内联
- 避免嵌套在
<symbol></symbol>或<defs></defs>里——除非你显式用<use href="#id"></use>实例化并绑定 ID
如何正确初始化和触发动画
动画卡顿、跳变或开头闪一下，90% 是初始渲染态没对齐。关键不是“怎么写 @keyframes”，而是“第一帧是否已设好偏移”。
- 必须在
<path></path>上预设内联样式：style="stroke-dasharray: 246.89; stroke-dashoffset: 246.89;"，否则浏览器按默认值（stroke-dasharray: none）渲染首帧 - 基础样式不能省：
stroke: currentColor、fill: none、stroke-width: 2，否则继承干扰或填充重绘会导致闪烁 - CSS 动画只驱动
stroke-dashoffset单一属性，stroke-dasharray保持不变；建议用animation-fill-mode: forwards锁定终态，避免动画结束回退 - 动画时长别低于
0.4s，太短易被渲染延迟卡住，尤其在低端 Android 设备上
响应式缩放时长度会变吗
会。当 viewBox 改变、父容器缩放或 CSS transform: scale() 应用后，路径视觉长度变化，但 getTotalLength() 仍返回原始值——它不感知渲染层缩放。
- 若需响应式适配，每次尺寸变化后必须重新调用
getTotalLength()并更新内联样式或 CSS 自定义属性（如--len） - 用 CSS 变量时注意：JS 设置后需确保样式表已重计算，避免“刚设完变量，动画就触发，但 CSS 还没读到新值”
- 高精度场景下，
stroke-linecap: round或square会使端点额外延伸，虽不影响getTotalLength()计算，但可能让动画起止位置略偏，可视需求微调偏移量
最常被忽略的点是：动画前没检查路径是否真有 stroke 且 stroke-width > 0。没有描边的路径，stroke-dasharray 直接失效，浏览器不会报错，只会静默跳过——先打开控制台确认 getTotalLength() 返回非零值，再查元素 computed styles 里的 stroke 和 stroke-width 是否生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
