uni-app中SVG点击触发动画的关键限制是微信小程序不支持CSS stroke-dasharray/offset动画，必须JS驱动；H5可用getTotalLength+uni.createAnimation，小程序需改用iconfont或canvas方案。
uni-app 中用 SVG
uni-app 的 WebView 渲染层（尤其是微信小程序平台）不支持原生 CSS stroke-dasharray + stroke-dashoffset 动画，直接写 @keyframes 控制 SVG 路径描边动画大概率失效。H5 平台虽能跑通，但跨端一致性差——这不是写法错，是底层渲染机制卡住的。
真正能跨端稳定工作的路径动画，必须靠 JS 主动控制 stroke-dashoffset 数值，并用 requestAnimationFrame 或 uni.createAnimation 驱动（后者仅限 H5/APP，小程序需用 animation API 或 setData 节奏控制）。
点击图标触发 SVG 路径描边动画的跨端写法
核心思路：预计算路径总长度 → 初始设 stroke-dasharray 为 “L,L” → 点击时把 stroke-dashoffset 从 L 动画减到 0。
- 用
uni.createSelectorQuery()在onReady后获取getBBox()不可靠，必须用getBoundingClientRect()+ 原生 DOMgetTotalLength()（H5/APP 可行；小程序需用uni.canvasToTempFilePath绕路或改用 iconfont） - 小程序平台建议改用
uni.showLoading+ 自定义 SVG 图标组件 +animation对象控制transform缩放/旋转，避开路径描边 - H5 端可安全使用
document.querySelector('path').getTotalLength()，然后用uni.createAnimation({ duration: 300 })设置styles动态更新stroke-dashoffset
示例（H5 有效）：
const path = document.querySelector('#check-path')
const len = path.getTotalLength()
path.style.strokeDasharray = `${len} ${len}`
path.style.strokeDashoffset = len
// 点击后
const animation = uni.createAnimation({ duration: 300 })
animation.strokeDashoffset(0).step()
this.animationData = animation.export()
为什么
uni-app 模板编译会把内联 SVG 当作静态结构处理，v-if 或 :class 切换时容易丢失 SVG 元素引用，ref 获取不到真实 DOM 节点——尤其在 v-for 渲染多个图标时。
- 必须用
外包一层uni.createSelectorQuery().select('.svg-wrapper').select('path')查找 - 避免在
data里直接写 SVG 字符串并用v-html插入，这会导致无法绑定事件、无法获取 path 元素 - 微信小程序中，
标签本身不被原生支持，实际是 uni-app 编译成
更稳妥的替代方案：用 iconfont + uni.showToast 或自定义动画组件
如果只是做「点击反馈型」路径动画（比如勾选、加载、播放），别硬刚 SVG 路径。iconfont 的每个图标本质是单个 Unicode 字符，用 transform: scale() 或 opacity 动画既轻量又 100% 跨端。
- 引入 iconfont 后，用
animation控制scale和color - 复杂路径效果（如绘制地图路线、手绘签名）建议改用
canvas+uni.createCanvasContext，手动逐帧 drawLine - APP/H5 可考虑引入
lottie-mini（轻量版 Lottie），把 AE 动画导出为 JSON，uni-app 官方有插件支持
真正卡住的从来不是“怎么写动画”，而是没意识到 uni-app 的 SVG 支持在小程序里是假的——它压根没把
