Question

我正在尝试使用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>

Answer 1

正如罗伯特所说，您需要为每个动画值以相同顺序使用相同数量和类型的路径命令。这是在局部UI中进行编辑的部分功能。在您的情况下，它可能以相同的顺序显示两个线段和两个立方贝塞尔曲线-但这还不够：路径必须具有大多数GUI不能显示的属性

（在拓扑上）相同的起点
同一个方向，
并且，对于封闭路径，您必须以相同的方式写入最后一点：要么一直重复起点作为终点，要么一直关闭起点并隐式关闭路径。< / li>

简而言之：无法读取路径命令。

您的第一个路径是（四舍五入为合理的值，并重复所有路径命令以保持清晰度）

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

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

1 个答案: