使用Anime.js变形SVG路径后d属性异常问题求助

问题现象 #

尝试用anime.js实现SVG clip-path的形状变形（两个形状点数一致），但动画结束后DOM中d属性的最终值与传入的目标值完全不一致，导致路径显示异常：

• 初始d值：

M-82.511-84.642a.483.483,0,0,1,.174.226.45.45,0,0,1-.061.259.677.677,0,0,1-.14.222.467.467,0,0,1-.251.112.572.572,0,0,1-.314-.041.377.377,0,0,1-.224-.226.617.617,0,0,1,.072-.326.8.8,0,0,1,.158-.3.366.366,0,0,1,.305-.1A.621.621,0,0,1-82.511-84.642Z

• 动画后被篡改的d值：

M-82.511 -84.642a0,0,1,0,0,1 0,0,1 0,0,1 0,0,1 -0.314 0.377,0,0,1 -0.224 0.617,0,0,1,0.072 0.8,0,0,1,0.158 0.366,0,0,1,0.305 -0.1A0,0,1 -82.511 -84.642Z

问题原因 #

anime.js默认会尝试解析SVG路径的数值部分进行插值动画，但它的路径解析逻辑对**紧凑格式的路径（如省略空格的坐标、带小数点的参数）**支持不完善，会错误解析路径指令的参数：比如把.483这类小数当成无效值替换为0，还会错误插入空格拆分合法的指令组合。

解决方案 #

方案1：使用rawCSS选项强制不解析路径值 #

anime.js提供rawCSS参数，设置为true时会直接将目标字符串赋值给属性，跳过数值解析和插值步骤，适合路径切换或自定义插值的场景：

anime({
  targets: 'svg path',
  duration: 500,
  easing: 'linear',
  d: {
    value: 'M-82.511-84.642a.483.483,0,0,1,.174.226.45.45,0,0,1-.061.259.677.677,0,0,1-.14.222.467.467,0,0,1-.251.112.572.572,0,0,1-.314-.041.377.377,0,0,1-.224-.226.617.617,0,0,1,.072-.326.8.8,0,0,1,.158-.3.366.366,0,0,1,.305-.1A.621.621,0,0,1-82.511-84.642Z',
    rawCSS: true
  }
});

方案2：格式化路径为标准解析格式 #

把紧凑格式的路径拆分成anime.js可正确识别的标准格式：

• 给坐标、指令参数之间添加空格（如M-82.511-84.642改为M-82.511 -84.642）
• 确保所有小数参数保留完整格式，避免解析器误判

修改后的路径示例：

M-82.511 -84.642 a .483 .483 0 0 1 .174 .226 a .45 .45 0 0 1 -.061 .259 a .677 .677 0 0 1 -.14 .222 a .467 .467 0 0 1 -.251 .112 a .572 .572 0 0 1 -.314 -.041 a .377 .377 0 0 1 -.224 -.226 a .617 .617 0 0 1 .072 -.326 a .8 .8 0 0 1 .158 -.3 a .366 .366 0 0 1 .305 -.1 A .621 .621 0 0 1 -82.511 -84.642 Z

方案3：结合专业SVG路径动画工具 #

如果需要复杂的路径变形动画，可结合anime.js与Snap.svg或GreenSock的SVG路径插件，这类工具对SVG路径的解析和插值支持更完善，能避免anime.js的解析缺陷。

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