不能直接用Tailwind的stroke-dasharray工具类实现可靠描边动画，因为其硬编码值无法匹配SVG路径动态计算的真实长度，导致错位、跳变或不触发；必须内联SVG并用JS调用getTotalLength()注入CSS变量，再配合自定义CSS动画驱动stroke-dashoffset。
不能直接用 stroke-dasharray 的 Tailwind 工具类实现可靠描边动画——因为所有路径长度必须运行时读取，硬编码值会错位、跳变或完全不触发。
为什么 tailwind class="stroke-dasharray-120" 不行
Tailwind 的 stroke-dasharray 工具类（如 stroke-dasharray-120）只生成固定数值，而 SVG 路径真实长度由 getTotalLength() 动态返回，不同图标、同一图标在 SSR/
- 动画卡在半截（
stroke-dasharray值小于实际长度） - 第一帧闪一下再动（浏览器按默认值渲染首帧）
- 多个
必须内联 SVG 并用 JS 注入动态长度
外部 SVG（
background-image、）无法被 CSS 或 JS 访问 DOM，getTotalLength() 必然失败。只能把 SVG 代码直接贴进 HTML：
- 用 React/Vue 组件库时，选提供内联版本的图标（如 Heroicons 的
Icon组件） - 纯 HTML 项目，手动复制 SVG 源码，确保每个
id或可被querySelector精确选中 - JS 中对每个
pathEl.getTotalLength()，不要复用一个值
注入方式统一用：pathEl.style.setProperty('--path-len', pathEl.getTotalLength())，避免污染全局 :root。
用 CSS 变量 + @keyframes 实现动画主体
在 Tailwind 项目中，仍需自定义 CSS（加到 @layer utilities 或独立 CSS 文件），不能只靠 utility classes：
- 给
stroke: currentColor、fill: none、stroke-width: 2 - 初始态必须写死：
style="stroke-dasharray: var(--path-len) var(--path-len); stroke-dashoffset: var(--path-len);" - CSS 动画只驱动
stroke-dashoffset从var(--path-len)到0，别碰stroke-dasharray - 必须加
animation-fill-mode: forwards，否则动画结束立刻回退
示例关键 CSS：
svg .animated-path {
stroke-dasharray: var(--path-len) var(--path-len);
stroke-dashoffset: var(--path-len);
animation: draw 0.8s ease-out forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}
requestAnimationFrame 是最可靠的初始化时机
别用 window.onload 或 DOMContentLoaded：前者太晚，后者时 SVG 可能尚未完成布局计算，getTotalLength() 仍返回 0。正确做法是：
- 对每个
requestAnimationFrame(() => { /* 读 length 并 setProperty */ }) - 若路径来自
+ useEl.getSVGDocument()?.getElementById('id')?.cloneNode(true) - SSR 渲染场景下，服务端无法执行
getTotalLength()，必须等客户端 hydration 后再触发
复杂点在于：路径长度不是“配置项”，而是渲染管线产出的几何结果；你没法绕过它，也不能靠估算或媒体查询响应式赋值——viewBox 缩放、transform、stroke-width 都不影响 getTotalLength() 返回值，但视觉表现会变。每次改图、换图标、加 ，都得重新跑 JS 注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
