anime.js写的svg动画开始后，为什么原形状不一致？

Question

我参考这篇文章，https://segmentfault.com/a/11...
用anime.js写了svg动画，动画效果没有问题，但是原形状却 不一致。

html代码如下

<svg id="svg_heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="216.667px" height="169.333px" viewBox="0 0 216.667 169.333" enable-background="new 0 0 216.667 169.333"
         xml:space="preserve">
    <path fill="#F21809" d="M108.432,24.544c6.13-0.074,20.642-20.429,49.922-19.958c46.914,0.751,63.467,48.241,52.727,77.577 c-13.235,36.166-76.509,85.559-102.648,85.559c-36.17,0-102.669-60.367-107.188-103.491C-1.672,36.434,21.903,1.465,57.094,1.465 C92.278,1.465,95.85,24.708,108.432,24.544z"/>
</svg>
<svg id="svg_cake" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="216.667px" height="169.333px" viewBox="0 0 216.667 169.333" enable-background="new 0 0 216.667 169.333"
         xml:space="preserve">
    <path fill="#F21809" d="M79.333,76.333c52.532,2.626,43.254-57.99,52.333-58.667c53.667-4,66.801,38.125,60,45.333 c-55.667,59,22.667,81.667-33,91C147.351,155.897,26.333,158,9,98.667C6.514,90.156,24.642,21.7,35.805,21.7 C46.966,21.7,52.667,75,79.333,76.333z"/>
</svg>

两个svg ，其中一个是心形，另一个是随意的形状。如下图，未添加动画 效果前：

然后用anime.js写了svg动画。

        var d_heart=$('#svg_heart path').first().attr('d');
        console.log(d_heart);
        var d_cake=$('#svg_cake path').first().attr('d');
        console.log(d_cake);
        
        var anime_stagger=anime({
            targets: '#svg_heart path',
            d: [d_heart, d_cake],
            duration: 1000,
            loop: true,
            easing: 'easeInOutQuint',
            autoplay: true,
            direction: 'alternate'
        }); 

动画效果没有问题，但是原形状却跟原来的心形 不一致。

这是为什么呢？
补充：两个svg的path节点数量相同，所以跟节点数量没关系，增加或减少 都会有这个问题。

Answer 1

第一张图的路径为

M108.432,24.544
c6.13,-0.074,20.642,-20.429,49.922,-19.958
c46.914,0.751,63.467,48.241,52.727,77.577
c-13.235,36.166,-76.509,85.559,-102.648,85.559
c-36.17,0,-102.669,-60.367,-107.188,-103.491
C-1.672,36.434,21.903,1.465,57.094,1.465
C92.278,1.465,95.85,24.708,108.432,24.544z

但是经过anime初始化后，路径变成了

M108.432,24.544
c6.13,-0.074,20.642,-20.429,49.922,-19.958
c46.914,0.751,63.467,48.241,52.727,77.577
c-13.235,36.166,-76.509,85.559,-102.648,85.559
C-36.17,0,-102.669,-60.367,-107.188,-103.491
C-1.672,36.434,21.903,1.465,57.094,1.465
C92.278,1.465,95.85,24.708,108.432,24.544z

没错，就是第四个c变成了C，这就是下面那个变形的心的路径

对比目标随意形状的路径

M79.333,76.333
c52.532,2.626,43.254,-57.99,52.333,-58.667
c53.667,-4,66.801,38.125,60,45.333
c-55.667,59,22.667,81.667,-33,91
C147.351,155.897,26.333,158,9,98.667
C6.514,90.156,24.642,21.7,35.805,21.7
C46.966,21.7,52.667,75,79.333,76.333z

可以看出来用的坐标命令都是McccCCC，所以猜测可能是根据目标形状的指令来更改路径的

具体的解决方法，我对这个也不熟，不知道有没有优雅的，按照我现在来做的话，就是让两个图形相似，就是用的命令一样

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。