SVG 的 d 属性无法用 CSS transition 直接过渡，因浏览器不支持字符串路径插值；真正平滑变形需 JS 插值（如 anime.js/GSAP）或预设 @keyframes 关键帧；clip-path polygon 过渡要求顶点数、单位一致且显式声明 transition；描边动画+transform 是更实用的视觉替代方案。
SVG 的 d 属性不能用 transition 直接过渡
浏览器根本不支持对 d 这种字符串型路径数据做插值计算。哪怕你写了 transition: d 0.3s，它也会被静默忽略——不是卡顿，是压根没反应。这是因为 CSS 动画引擎只处理数值型属性（比如 opacity、transform、stroke-width），而 d="M0,0 L100,100" 是命令序列，不是数字。
真正能平滑变形的只有 JS 插值或预设关键帧
如果起点和终点结构差异大（比如矩形 d → 心形 d），必须走 JavaScript 路线：
- 用
anime.js或GSAP手动在两个d字符串之间逐帧生成中间路径数据 - 原生方案可用
requestAnimationFrame+ 路径解析库（如path-data-polyfill）做插值 - 若只需有限形态切换（如三态：圆 → 方 → 三角），可提前定义好几组
d值，用@keyframes+animation播放，但这是离散帧，不是数学意义上的平滑插值
clip-path polygon 过渡要严格对齐顶点数和单位
想用纯 CSS 实现“形状变化”，clip-path: polygon() 是唯一靠谱路径，但极易失效：
- 起始和结束都必须用
polygon()，不能混用circle()或inset() - 顶点数量必须一致，比如都写 4 个点：
polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)→polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) - 单位统一用
%，混用px和%会导致计算失败 - 必须显式声明
transition: clip-path 0.4s ease，transition: all不生效 - Safari 需 iOS 15.4+ / macOS 12.3+，旧版本直接跳变，不降级
更实用的替代方案：描边动画 + transform 组合
多数所谓“路径变形”需求，其实不需要真改几何结构：
立即学习“前端免费学习笔记（深入）”；
- 用
stroke-dasharray+stroke-dashoffset模拟绘制效果：先调getTotalLength()获取长度，再把stroke-dashoffset从全长变为0 - 配合
transform移动、缩放整个path元素，视觉上产生“变形”错觉（如拉伸、旋转） -
stroke颜色、宽度、opacity都可直接transition，但注意 Safari 下stroke变色可能闪烁，建议换用stroke-opacity+ 固定色
d 之间连续插值时，没有绕过 JS 的纯 CSS 方案。最容易被忽略的是：即使用了 JS 插值，也要确保起点和终点路径的命令类型（M、L、C 等）和参数数量尽量对齐，否则中间帧会扭曲或崩坏。 
