htmlsvgsvg-animatesmil

Svg animate with keyspline is not moving


I created an svg animation ↓

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

I wanted the movement of the white line to look more natural, so I'm trying to add some ease-in/ease-out effects with keySpline attributes on the animate tag ↓, but the animation is no longer happening.

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

What can I do to get the animation working again, and get the white line to animate with a ease-in/ease-out effect?


Solution

  • Keytimes run from 0 to 1. Numbers outside this range are invalid.

    Correcting that seems to make things work correctly.

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