这个 SVG 动画似乎不想平滑过渡，我该如何解决？答案

【问题标题】：This SVG animation does not seem to want to have a smooth transition, how do i solve this?这个 SVG 动画似乎不想平滑过渡，我该如何解决？
【发布时间】：2018-11-24 18:09:09
【问题描述】：

我正在尝试使用 SMIL 声明制作 SVG 动画，但不是在两条路径之间获得平滑过渡，而是从一条路径立即过渡到另一条路径，而且它似乎与时间无关动画的持续时间。有人可以帮我解决这个问题吗，我真的很想顺利过渡，由于文件大小，最好在 SMIL 中。

代码如下：

<svg
   width="130mm"
   height="130mm"
   viewBox="0 0 130 130">
    <path d="M29.392899 105.03816999999998C31.388397 106.80194999999998 33.532246 108.42680000000001 35.757774 109.88056 37.428773 110.97210000000001 39.145833 111.96722 40.880677 112.85228000000001L35.993332 109.52785Z" fill-rule="nonzero" fill="#070707">
        <animate dur="8s" repeatCount="indefinite" attributeName="d" values="M29.392899 105.03816999999998C31.388397 106.80194999999998 33.532246 108.42680000000001 35.757774 109.88056 37.428773 110.97210000000001 39.145833 111.96722 40.880677 112.85228000000001L35.993332 109.52785Z;M27.107598 102.89224000000002C31.114479 106.89909999999998 36.14859 110.43669 41.10393 112.96472999999997L30.967228 104.24995000000001 21.295187 95.93468999999999C23.088927 98.51334000000003 24.941479 100.72611999999998 27.107598 102.89224000000002Z;M29.392899 105.03816999999998C31.388397 106.80194999999998 33.532246 108.42680000000001 35.757774 109.88056 37.428773 110.97210000000001 39.145833 111.96722 40.880677 112.85228000000001L35.993332 109.52785Z" fill="freeze"
          calcMode="spline"
          keySplines="0.1 0 0.51 1; 0.61 0.01 0.89 1">
   </path>
</svg>

【问题讨论】：

您每次都需要以相同的顺序执行相同数量和类型的路径命令。你有吗？乍一看，动画路径看起来更长。
那是因为在动画路径中我必须放置初始路径的坐标；最终路径的坐标；以及初始路径的坐标，以便它甚至动画。

标签： html svg svg-animate

【解决方案1】：

正如罗伯特所说，对于每个动画值，您需要以相同顺序使用相同数量和类型的路径命令。这只是在图形 UI 中进行编辑的部分原因。在您的情况下，它可能会以相同的顺序向您显示两条线段和两个三次贝塞尔曲线 - 但这还不够：路径必须具有大多数 GUI 不显示的一些属性

（拓扑上）相同的起点，
同一个方向，
并且，对于封闭路径，您必须采用与最后一个点相同的方式写入：要么始终将起点重复为终点，要么将其关闭并始终隐式关闭路径。

简而言之：没有办法绕过读取路径命令。

您的第一个路径是（四舍五入到合理的值，并重复所有路径命令以清楚起见）

M 29.3929,105.038
C 31.3884,106.802 33.5322,108.427 35.7578,109.881
C 37.4288,110.972 39.1458,111.967 40.8807,112.852
L 35.9933,109.528
Z

而第二条路径是

M 27.1076,102.892
C 31.1145,106.899 36.1486,110.437 41.1039,112.965
L 30.9672,104.25
L 21.2952,95.9347
C 23.0889,98.5133 24.9415,100.726 27.1076,102.892
Z

它的第四个点（在第二个 L 命令的末尾）一定是起点，然后继续第五个/第一个（相同），第二个，第三个，然后用 Z 命令隐式关闭路径。

M 21.2952,95.9347
C 23.0889,98.5133 24.9415,100.726 27.1076,102.892
C 31.1145,106.899 36.1486,110.437 41.1039,112.965
L 30.9672,104.25
Z

【讨论】：