Svg animate with keyspline is not moving

Question

我创建了一个svg动画↓

<svg height="40%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" 
viewBox="0 0 400 379" width="40%" >
<circle cx="199.348" cy="164.564" id="circle" r="64.38" style="fill:=black" />
<path d="M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z" id="logo2"
style="fill:#fff;">
<animate attributeName="d" dur="3000ms" repeatCount="indefinite" id="logo2a1" values="
M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z;
M149.185,177.484l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
M272.008,54.66l41.676,-41.676l6.919,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
M307.037,339.778l41.676,-41.677l6.919,0l-0,9.74l-38.635,38.635l-9.96,-0l0,-6.698Z;
M11.858,314.811l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
M162.228,164.44l41.677,-41.676l6.918,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z"
</path>
</svg>

我想让白线的运动看起来更自然，所以我试图在animate标签上添加一些keySpline属性的ease-in/ease-out效果，但动画不再发生。

<svg height="40%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" 
viewBox="0 0 400 379" width="40%" >
<circle cx="199.348" cy="164.564" id="circle" r="64.38" style="fill:=black" />
<path d="M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z" id="logo2"
style="fill:#fff;">
<animate attributeName="d" dur="3000ms" repeatCount="indefinite" calcMode="spline" id="logo2a1" values="
M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z;
M149.185,177.484l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
M272.008,54.66l41.676,-41.676l6.919,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
M307.037,339.778l41.676,-41.677l6.919,0l-0,9.74l-38.635,38.635l-9.96,-0l0,-6.698Z;
M11.858,314.811l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
M162.228,164.44l41.677,-41.676l6.918,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z"
keyTimes="0;0.5;1;1.5;2;2.5;3.0"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1 " />
</path>
</svg>

我怎么做才能使动画再次工作，并使白线以轻松进入/轻松退出效果进行动画?

Answer 1

按键时间从0到1。超出此范围的数字无效。

纠正这个错误似乎可以使事情正常工作。

<svg height="40%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" 
viewBox="0 0 400 379" width="40%" >
<circle cx="199.348" cy="164.564" id="circle" r="64.38" style="fill:=black" />
<path d="M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z" id="logo2"
style="fill:#fff;">
<animate attributeName="d" dur="3000ms" repeatCount="indefinite" calcMode="spline" id="logo2a1" values="
M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z;
M149.185,177.484l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
M272.008,54.66l41.676,-41.676l6.919,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
M307.037,339.778l41.676,-41.677l6.919,0l-0,9.74l-38.635,38.635l-9.96,-0l0,-6.698Z;
M11.858,314.811l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
M162.228,164.44l41.677,-41.676l6.918,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z"
keyTimes="0;0.16;.3;.4;.6;.8;1.0"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1 " />
</path>
</svg>