SVG的d属性不支持CSS过渡，因浏览器无法插值复杂字符串；应优先用transform模拟形变，或用anime.js/GSAP做JS插值，前提为起始与结束d指令结构完全一致。
SVG path 的 d 属性不能直接过渡
浏览器原生不支持对 path 元素的 d 属性做 CSS 过渡 —— 无论你写 transition: d 0.3s 还是 transition: all 0.3s，都不会生效。这是 SVG 规范和渲染引擎的限制，不是写法问题。
常见错误现象：d 突然跳变、过渡完全没反应、控制台无报错但视觉毫无动画感。
- 只能过渡那些浏览器能插值的属性，比如
transform、opacity、fill、stroke-width -
d是字符串，且语法复杂（含字母指令 + 多组数字），浏览器无法自动推算中间路径 - 哪怕两个
d字符串结构完全一致（相同指令数、相同参数个数），CSS 依然不认
用 transform 模拟路径形变最稳妥
如果目标是“看起来像路径在变形”，优先考虑位移、缩放、旋转等 transform 组合，而不是硬刚 d。它兼容性好、性能高、写法直白。
适用场景：图标收拢/展开、箭头翻转、勾号打钩动画、简单几何切换（如矩形 ↔ 圆角矩形）。
立即学习“前端免费学习笔记（深入）”；
- 把不同状态的
path写成多个元素，用opacity+transform控制显隐和位移 - 用
transform: scale()配合transform-origin实现“生长”或“收缩”效果 - 避免在
transform中混用matrix()和其他函数，容易因解析顺序导致意外偏移
示例：一个收起的汉堡图标 → 展开的叉号
<svg viewBox="0 0 24 24"> <path class="icon-bar" d="M4 6h16M4 12h16M4 18h16" /> </svg>
通过给 .icon-bar:nth-child(1) 加 transform: rotate(45deg) translate(4px, 4px)，第二根加 opacity: 0，第三根加 rotate(-45deg) translate(4px, -4px)，就能模拟叉号出现。
真要插值 d？必须用 JavaScript + anime.js 或 GSAP
只有 JS 库能解析并逐点插值两个 d 字符串。CSS 做不到，别浪费时间试。
关键前提：起始和结束 d 必须有**完全相同的指令结构和参数数量**。比如都用 M L L L Z，不能一个用 M C C Z 另一个用 M L L Z。
-
anime.js需手动提供begin和end的d字符串，并用anime.path(pathEl)提取路径数据 -
GSAP的MorphSVGPlugin更友好，但需注册插件，且免费版只支持基础形态 - 路径点过多（>100 个）时，JS 插值会卡顿，建议先用工具简化路径（如 SVGOMG）
示例（anime.js）：
anime({
targets: pathEl,
d: [
{value: 'M10 10 L20 10 L20 20 Z'},
{value: 'M10 10 L15 5 L20 10 Z'}
],
duration: 500
});
用 <animate></animate> 标签？只适合简单、静态 SVG
SVG 原生 <animate></animate> 支持 attributeName="d"，但它不是 CSS，也不走层叠规则，且现代开发中维护成本高。
适用场景：单页静态 SVG 图标，不需要响应式控制、不需 JS 交互、不需复用动画逻辑。
- 必须确保起始和结束
d指令一一对应，否则动画中途崩溃或显示空白 - 无法用 CSS 伪类（如
:hover）触发，得靠 JS 调用beginElement() - Chrome 对
<animate></animate>的硬件加速支持不稳定，复杂路径易掉帧
一句实在话：现在还用 <animate></animate> 做路径过渡，基本等于主动放弃调试便利性和后续扩展性。
d 字符串里空格、逗号、指令大小写的隐性差异，它们会让 JS 插值直接失败，而错误信息往往只报“NaN”或静默跳过。 
