如何避免anime.js实现SVG morph过渡时出现路径变形问题

• 匹配两个路径的节点属性
  变形异常的核心原因是两个路径的节点数量、节点类型、绘制方向、起点位置不匹配，在Inkscape中操作调整：
  1. 先将矩形路径的微小圆角移除，转为纯直角路径降低对齐难度
  2. 你的异形路径共5个贝塞尔节点，需要把矩形路径也添加到相同数量的节点，节点位置分别对应异形的节点位置
  3. 统一绘制方向：保证两个路径都是顺时针/逆时针绘制，起点位置一一对应
  4. 统一节点类型：把矩形的所有直线节点转成贝塞尔曲线节点，和异形路径的节点类型保持一致
• 统一路径命令格式
  不要在path的d属性中混用h/v等简写命令，将所有路径段都转为绝对坐标的L（直线）或C（贝塞尔曲线）命令。操作方式：Inkscape中选中路径，点击「路径」-「简化」，再通过「扩展」-「修改路径」-「转换为贝塞尔曲线」完成标准化。
• 校验路径参数一致性
  提取两个路径的d属性值，拆分所有命令后的数值，保证两者的数值总数量完全相同。比如异形路径每个贝塞尔段对应6个坐标参数，矩形路径的对应段也要有相同数量的参数。
• 优化anime.js配置
  移除配置中无效的elasticity参数（该参数仅对弹簧类缓动生效，线性缓动下无作用），避免额外参数干扰插值逻辑。

内容的提问来源于stack exchange，提问作者Alexander Solonik