SVG：用于 mophing 动画的导出

Question

当我在 Illustrator 中创建 SVG 路径并更改变形动画的点位置时，点完全不同！

例如：

<path d="M 355.077,300c-31.017,0-31.017-200-62.034-200 s-31.017,200-62.034,200c-31.015,0-31.015-200-62.031-200c-31.014,0-31.014,200-62.029,200c-31.013,0-31.013-200-62.026-200"/>

和

 <path d="M355.077,217.635 c-31.017,0-31.017-64.507-62.034-64.507s-31.017,185.701-62.034,185.701c-31.015,0-31.015-274.316-62.031-274.316 c-31.014,0-31.014,175.276-62.029,175.276c-31.013,0-31.013-97.737-62.026-97.737"/>

是相同的路径（显然有移动的点）。但是，它们出现的顺序是完全不同的，因此动画会推动 SVG 元素周围的所有点。

我已经尝试了 Illustrator 提供的所有导出脚本。

导出时是否有获得一致结果的技巧？所以这些点在正确的地方？也许我可以使用一个插件？

谢谢！

Answer 1

这不是答案。这只是说路径可以用于变形，因为命令和命令的数量是相同的。但是，如果您拥有的路径不同，则解决方案是将所有命令更改为 C

<svg viewBox="0 0 400 400" width="300">

<path fill="gold" d="M 355.077,300
                     c-31.017,0-31.017-200-62.034-200 
                     s-31.017,200-62.034,200
                     c-31.015,0-31.015-200-62.031-200
                     c-31.014,0-31.014,200-62.029,200
                     c-31.013,0-31.013-200-62.026-200">
  
  <animate 
       attributeName="d"
       attributeType="XML"
       values="M 355.077,300
                     c-31.017,0-31.017-200-62.034-200 
                     s-31.017,200-62.034,200
                     c-31.015,0-31.015-200-62.031-200
                     c-31.014,0-31.014,200-62.029,200
                     c-31.013,0-31.013-200-62.026-200;
               M355.077,217.635 
         c-31.017,0-31.017-64.507-62.034-64.507
         s-31.017,185.701-62.034,185.701
         c-31.015,0-31.015-274.316-62.031-274.316 
         c-31.014,0-31.014,175.276-62.029,175.276
         c-31.013,0-31.013-97.737-62.026-97.737;
               
               M 355.077,300
                     c-31.017,0-31.017-200-62.034-200 
                     s-31.017,200-62.034,200
                     c-31.015,0-31.015-200-62.031-200
                     c-31.014,0-31.014,200-62.029,200
                     c-31.013,0-31.013-200-62.026-200"
       dur="5s"
       repeatCount="indefinite"/>
  </path>


  
</svg>