html本身不处理路径过渡，真正起作用的是css的transition或@keyframes；但svg的d属性不可被css过渡，因其为字符串且无自动插值能力，须用stroke-dashoffset模拟绘制或js逐帧计算插值。
直接说结论：HTML 本身不处理路径过渡，真正起作用的是 CSS 的 transition 或 @keyframes，但「复杂路径」——比如 SVG 中的 <path></path> 形状变化、贝塞尔曲线位移、或 Canvas 动态绘制轨迹——不能靠普通 CSS transition 自动插值，必须用 stroke-dasharray + stroke-dashoffset、SMIL（已弃用）、或 JavaScript 驱动关键点计算。
为什么 transition 对 SVG <path></path> 失效
CSS transition 只能对「可计算中间值」的属性生效，比如 opacity、transform、color。而 d 属性（定义路径形状）是字符串，浏览器无法自动在 M10,20 L30,40 和 M50,60 C70,80 90,100 110,120 之间做线性插值。
- 常见错误现象：
transition: d 0.3s完全没反应，控制台无报错，但动画不触发 - 根本原因：CSS 规范明确将
d列为「不可过渡属性」 - 替代方案只有两个方向：用
stroke-dashoffset模拟「路径绘制」效果，或用 JS 逐帧重算d字符串
stroke-dasharray + stroke-dashoffset 实现路径描边动画
这是目前最稳定、兼容性最好（Chrome/Firefox/Safari 均支持）的 SVG 路径「过渡」方案，本质是把整条路径当做一个虚线，通过移动虚线偏移量制造「画出来」的错觉。
- 第一步：用
getTotalLength()获取路径真实长度：const len = pathEl.getTotalLength(); - 第二步：CSS 初始化路径不可见：
stroke-dasharray: [len]; stroke-dashoffset: [len]; - 第三步：过渡到可见状态：
stroke-dashoffset: 0;，配合transition: stroke-dashoffset 0.8s ease-out - 注意：必须给
<path></path>设置stroke和fill: none，否则看不到描边效果
svg path {
stroke: #3498db;
stroke-width: 2;
fill: none;
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 0.6s cubic-bezier(0.3, 0.7, 0.5, 1);
}
svg path.drawn {
stroke-dashoffset: 0;
}
JS 驱动的动态路径过渡（适合非直线/多段贝塞尔）
当路径需要从 A 形状「变形」为 B 形状（比如矩形变心形），且两端 d 字符串结构差异大时，stroke-dashoffset 就不够用了。这时得用 JS 手动插值每一段命令。
- 关键限制：两段
d字符串必须有相同数量和类型的指令（如都以M开头，后面都跟 4 个L），否则插值会错位 - 推荐工具：
anime.js或GSAP内置了d属性 tween 支持，自动解析并匹配坐标点 - 手写简易插值示例（仅适用于结构一致的路径）：
anime({ targets: pathEl, d: ['M10,10 L90,10', 'M10,90 L90,90'], duration: 1200 }); - 性能提示：避免在每帧中反复调用
getTotalLength()或正则解析d，应预先提取并缓存坐标数组
Canvas 路径动画不能靠 CSS 过渡
Canvas 是位图绘制，所有路径都在 JS 中生成并提交到画布，没有 DOM 属性可供 CSS 绑定。所谓「路径过渡」，实际是 JS 控制绘图节奏：
- 不要尝试给
<canvas></canvas>元素加transition: transform来模拟路径动——那只是整个画布在动，不是路径在生长 - 正确做法：用
requestAnimationFrame每帧重绘路径的一部分，例如按比例截取贝塞尔曲线上前 N% 的点 - 难点在于：三次贝塞尔曲线没有解析解，必须用 De Casteljau 算法或采样逼近，直接硬算
Math.pow(t, 3)会失真 - 轻量替代：用
Path2D+ctx.stroke(path, ...)配合setLineDash模拟绘制过程，但仅限直线段
真正麻烦的从来不是「怎么动」，而是「动得准不准」——SVG 路径变形要求两端结构对齐，Canvas 描绘依赖数值稳定性，任何一步坐标精度丢失都会导致路径抖动或断裂。别省那几行预处理代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
