Javascript SVG变形不平滑-动画js

我正在尝试使用动画JS创建一个简单的SVG变形，但是SVG并没有像下面看到的那样平滑过渡。有人知道为什么会这样吗

const SVG\u路径=[
{值：“M1920349H0V242S468-52.44960-73.33S1920,01920,0Z”}，
{值：“M1920466H0V359S159-60960-73S1920,01920,0Z”}
];
const MORPH_SVG=动画({
目标：“.path”，
d:[
SVG_路径[1]，
SVG_路径[0]
],
放松：“线性”，
持续时间：5000，
循环：正确
});
使用SVG_路径[0]作为路径的值


const SVG\u路径=[
{值：“M1920349H0V242S468-52.44960-73.33S1920,01920,0Z”}，
{值：“M1920466H0V359S159-60960-73S1920,01920,0Z”}
];
const MORPH_SVG=动画({
目标：“.path”，
d:[
SVG_路径[1]，
SVG_路径[0]
],
放松：“线性”，
持续时间：5000，
循环：正确
});

在我的回答中，我想对一般动画的实施提出一般性建议，并以作者的具体例子来考虑。p>
使用属性
d
实现平滑动画路径更改的主要条件是：

相同数量的节点
路径初始和最终位置中每个点的节点类型（A；C；Q）的精确匹配
可以通过不同的方式满足这些条件，但最好在向量编辑器中实现这一点

下图显示了向量编辑器中的初始路径，需要根据身份条件和相同数量的节点将其转换为最终路径。

红色箭头显示需要移动的节点



若要移动选定的定位点，必须在单击时对其进行标记
轮班
然后按住Ctrl键，将光标放置在选定点上
并将整个曲线移动到动画的最终位置



将文件以
*.svg
格式保存在矢量编辑器中，然后复制
最终路径的公式

动画实现
现在我们有了初始路径和最终路径的公式。要实现属性
d
路径的动画，请使用命令
SMIL

<animate attributeName="d" values="`begin path`;`final path`" .... />   





谢谢，但是您更改了什么？路径的d属性