animate-spin转不动主因是svg为inline元素且无宽高，需设inline-block/w-6/h-6、匹配viewbox与尺寸、避免%单位缩放；路径动画须用stroke-dasharray+stroke-dashoffset自定义关键帧，非animate-spin可实现。
animate-spin 转不动？先检查 SVG 是否被“压扁”了
直接加 animate-spin 却没旋转，90% 是因为 SVG 默认是 inline 元素，又没设宽高——CSS 的 transform: rotate() 在无明确 width/height 的 inline 元素上不触发渲染。这不是 Tailwind 的 bug，是浏览器渲染规则。
实操建议：
- 给 SVG 加
block或inline-block（比如inline-block w-6 h-6） - 确保
viewBox和实际尺寸匹配，避免缩放失真影响路径动画起点 - 别依赖父容器撑开尺寸；SVG 内部若用
%单位，动画会漂移 - 如果用
fill="none" stroke="currentColor"，记得同时设stroke-width，否则路径可能不可见
要动路径（path），不能只靠 animate-spin
animate-spin 只绕中心点转，对 checkbox 勾选、菜单展开这类「描边绘制」效果完全无效。真正控制 SVG 路径动画，得靠 stroke-dasharray + stroke-dashoffset 配合自定义关键帧。
核心逻辑：把路径总长设为 stroke-dasharray，再用 stroke-dashoffset 从末尾往回“擦”出线条。
实操建议：
- 用 JS 动态读取路径长度：
path.getTotalLength()，然后设为 CSS 变量：style="--svg-path-length: ${len}" - 关键帧里必须用
var(--svg-path-length)，不能写死像素值，否则响应式下会错位 - 动画起始状态建议设
stroke-dashoffset: var(--svg-path-length)，结束时为0 - 别忘了加
transition: stroke-dashoffset 0.3s ease-out实现缓入，纯@keyframes容易卡顿
tailwind.config.js 里怎么加自定义路径动画？
Tailwind 不内置路径动画类，得手动扩展 animation 和 keyframes。重点不是“加一个类”，而是让变量、关键帧、工具类三者对齐。
实操建议：
- 在
tailwind.config.js的theme.extend.animation里注册名称，例如："animate-svg-path-start": "svg-path-dash 0.4s ease-out forwards" - 对应的关键帧必须在 CSS 中定义（如
src/tailwind.css），且名字严格一致：@keyframes svg-path-dash - 别漏掉
forwards—— 否则动画播完立刻回退，勾选状态看起来像“闪一下” - 如果路径有多个
<path></path>，每个都要单独设变量和动画，group-data-checked这类状态选择器才可控
为什么 Ink Kit 的 ink:animate-svg-path 在 Checkbox 里能丝滑收放？
它不是靠单个 keyframe 一气呵成，而是拆成了两段：未选中 → 半选（indeterminate）→ 选中，每段用不同路径数据 + 不同 offset 起点。真正的复杂点不在动画本身，而在状态映射和路径预计算。
容易被忽略的细节：
- 半选状态（indeterminate）的路径通常比全选短，但 offset 起点要算准，否则中间会“跳帧”
- 所有路径
d属性必须用相同坐标系，否则getTotalLength()结果不可复用 - 动画触发时机要和 React 状态更新同步，用
useLayoutEffect读长度，比useEffect更稳 - 移动端 Safari 对
stroke-dashoffset的硬件加速支持弱，超过 3 条路径同时动，帧率可能掉到 40fps 以下
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
