带有keyspline的Svg动画没有移动答案

【问题标题】：Svg animate with keyspline is not moving带有keyspline的Svg动画没有移动
【发布时间】：2021-10-16 04:24:18
【问题描述】：

我创建了一个 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 属性的缓入/缓出效果，但动画不再发生.

<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>

我该怎么做才能让动画再次工作，并让白线以缓入/缓出效果进行动画处理？

【问题讨论】：

标签： html svg svg-animate smil

【解决方案1】：

Keytimes 从 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>

【讨论】：