如何使我的 svg 路径动画平滑而不是步进

Question

我希望值之间的过渡是平滑的和插值的，但它会从一帧跳到下一帧。我试过设置 keyTimes 和 calcMode 但它们似乎不起作用。

<svg xmlns:svg="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 300 300" version="1.1" id="svg8">

  <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
      
     <path style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke" d="m 51.777177,27.066689 c 0,0 27.716737,-5.009711 45.71259,5.509349 16.434013,9.606122 18.102413,21.801178 36.991143,17.622614 18.88873,-4.178563 34.11595,6.82428 45.31232,18.378189 9.09039,9.380674 28.92239,7.934321 28.92239,7.934321 0,0 -21.08008,12.423571 -39.0593,7.128224 -18.64966,-5.492806 -27.10796,4.877802 -41.7705,6.071788 -18.4905,1.505703 -21.29731,-7.201622 -41.476803,-9.921112 -15.916308,-2.14496 -21.532303,5.254117 -35.202885,4.590804 -8.102592,-0.393148 0.571045,-57.314177 0.571045,-57.314177 z;">
  <animate
  begin="0s"
    dur="1s"
    attributeName="d"
    repeatCount="indefinite"
    values="m 51.777177,27.066689 c 0,0 27.716737,-5.009711 45.71259,5.509349 16.434013,9.606122 18.102413,21.801178 36.991143,17.622614 18.88873,-4.178563 34.11595,6.82428 45.31232,18.378189 9.09039,9.380674 28.92239,7.934321 28.92239,7.934321 0,0 -21.08008,12.423571 -39.0593,7.128224 -18.64966,-5.492806 -27.10796,4.877802 -41.7705,6.071788 -18.4905,1.505703 -21.29731,-7.201622 -41.476803,-9.921112 -15.916308,-2.14496 -21.532303,5.254117 -35.202885,4.590804 -8.102592,-0.393148 0.571045,-57.314177 0.571045,-57.314177 z;
                   
          m 51.777177,27.066689 c 0,0 9.74226,3.950183 16.99505,3.879829 14.54241,-0.141064 30.14492,-5.816484 45.38438,2.507442 16.70598,9.124954 21.55248,21.930068 40.51806,18.115461 18.96558,-3.814607 31.84493,10.68943 42.79912,22.473193 5.68119,6.111424 10.26213,5.476947 10.26213,5.476947 0,0 -2.81269,5.346499 -13.37188,4.654742 -19.40014,-1.270948 -25.90588,-5.540935 -40.8038,0.534359 -17.17828,7.005208 -31.48182,-3.522055 -51.60529,-6.629043 -15.87212,-2.450595 -36.25913,12.584309 -51.85072,6.279671 -7.52055,-3.04102 1.67295,-57.292601 1.67295,-57.292601 z;
          
          m 51.777177,27.066689 c 0,0 20.14299,8.7136059 35.74314,7.7677078 15.18026,-0.9204387 27.31747,-8.198356 42.55693,0.1255701 16.70598,9.1249543 23.48878,22.7906423 46.5421,19.1911793 12.17378,-2.503937 26.69083,13.543343 31.11658,25.368416 -17.04989,-9.580947 -24.7361,-0.76845 -33.95216,3.037662 -17.17829,7.005206 -29.90461,-4.208072 -50.09929,-7.489617 -17.14028,-2.785219 -24.11578,9.060124 -41.32102,12.585167 -11.87315,2.432593 -26.96113,1.860878 -32.25923,-3.293483 -5.81447,-5.656718 1.67295,-57.2926022 1.67295,-57.2926022 z;
          
          m 51.777177,27.066689 c 0,0 5.52039,-2.752043 11.29691,-1.273654 13.83578,3.541004 25.75652,16.9379 41.84755,12.976965 21.40804,-5.269758 33.10473,-1.835011 48.77448,10.361504 15.02165,11.692071 12.82687,21.837831 36.77337,18.946771 8.50612,-1.02695 15.29639,4.72113 17.26644,11.44129 -4.00759,-1.10122 -7.86381,-2.25005 -14.05823,0.2777 -18.13677,7.40107 -28.68602,11.38232 -49.17123,3.63301 -18.28893,-6.9185 -25.29648,-1.51308 -42.96833,3.76611 -14.06834,4.2027 -30.28273,-5.59043 -40.5312,-3.93085 -7.5513,1.22281 -9.34853,2.60577 -10.90271,1.09376 -5.81447,-5.65672 1.67295,-57.292606 1.67295,-57.292606 z;"
  />
    </path>
  </g>

</svg>

更新： d 值必须具有相同数量的坐标才能平滑过渡

Answer 1

为了实现流畅的动画效果，所有路径中锚点的数量和类型都必须匹配。

示例代码有四个路径：

我只留下了两条路径开始和结束路径：

一条路径中有两个额外的节点点，我删除它们以满足两条路径中点相等的条件

动画公式现在看起来像这样：

values="start_path;end_path;start_path"

添加渐变：

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 300 300" version="1.1">
<defs>
 <linearGradient id="grad1" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
     <stop offset="10%" stop-color="#002F8E"/>
      <stop offset="50%" stop-color="#24bed2"/>
       <stop offset="60%" stop-color="#002F8E"/>
      <stop offset="70%" stop-color="#24bed2"/>
      <stop offset="80%" stop-color="#002F8E"/>
      <stop offset="90%" stop-color="#24bed2"/>
      <animate attributeName="x1" dur="4s" values="0;200;200;0;" repeatCount="indefinite" />
       <animate attributeName="y1" dur="4s" values="0;50;50;0" repeatCount="indefinite" /> 
    </linearGradient>
</defs> 

  <path fill="url(#grad1)"  d="m51.8 27.1c0 0 27.7-5 45.7 5.5 16.4 9.6 18.1 21.8 37 17.6 18.9-4.2 34.1 6.8 45.3 18.4 9.1 9.4 28.9 7.9 28.9 7.9 0 0-21.1 12.4-39.1 7.1-18.6-5.5-27.1 4.9-41.8 6.1-18.5 1.5-21.3-7.2-41.5-9.9-15.9-2.1-21.5 5.3-35.2 4.6-8.1-0.4 0.6-57.3 0.6-57.3z">
  <animate
  begin="0s"
    dur="4s"
    attributeName="d"
    repeatCount="indefinite"
    values=" 
          m51.8 27.1c0 0 27.7-5 45.7 5.5 16.4 9.6 18.1 21.8 37 17.6 18.9-4.2 34.1 6.8 45.3 18.4 9.1 9.4 28.9 7.9 28.9 7.9 0 0-21.1 12.4-39.1 7.1-18.6-5.5-27.1 4.9-41.8 6.1-18.5 1.5-21.3-7.2-41.5-9.9-15.9-2.1-21.5 5.3-35.2 4.6-8.1-0.4 0.6-57.3 0.6-57.3z;
                   
          m51.8 27.1c19.9-2.9 33.6 14.3 48.9 11.1 21.4-5.3 37.4-1.2 53.1 11 15 11.7 12.7 24.9 36.6 22 8.5-1 14.4 1.6 18.4 5.4-4-1.1-8.8 0.8-15 3.3-18.1 7.4-28.7 11.4-49.2 3.6-18.3-6.9-30.9-9-44.6-2.1-8 4.2-26.6 4.6-49.8 3-6.5-4.1 1.7-57.3 1.7-57.3z;
          
          m51.8 27.1c0 0 27.7-5 45.7 5.5 16.4 9.6 18.1 21.8 37 17.6 18.9-4.2 34.1 6.8 45.3 18.4 9.1 9.4 28.9 7.9 28.9 7.9 0 0-21.1 12.4-39.1 7.1-18.6-5.5-27.1 4.9-41.8 6.1-18.5 1.5-21.3-7.2-41.5-9.9-15.9-2.1-21.5 5.3-35.2 4.6-8.1-0.4 0.6-57.3 0.6-57.3z"            
  />
    </path>
</svg>

如有必要，您可以通过将它们替换为一种颜色来删除它们

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 300 300" version="1.1">


  <path fill="#002F8E"  d="m51.8 27.1c0 0 27.7-5 45.7 5.5 16.4 9.6 18.1 21.8 37 17.6 18.9-4.2 34.1 6.8 45.3 18.4 9.1 9.4 28.9 7.9 28.9 7.9 0 0-21.1 12.4-39.1 7.1-18.6-5.5-27.1 4.9-41.8 6.1-18.5 1.5-21.3-7.2-41.5-9.9-15.9-2.1-21.5 5.3-35.2 4.6-8.1-0.4 0.6-57.3 0.6-57.3z">
  <animate
  begin="0s"
    dur="4s"
    attributeName="d"
    repeatCount="indefinite"
    values=" 
          m51.8 27.1c0 0 27.7-5 45.7 5.5 16.4 9.6 18.1 21.8 37 17.6 18.9-4.2 34.1 6.8 45.3 18.4 9.1 9.4 28.9 7.9 28.9 7.9 0 0-21.1 12.4-39.1 7.1-18.6-5.5-27.1 4.9-41.8 6.1-18.5 1.5-21.3-7.2-41.5-9.9-15.9-2.1-21.5 5.3-35.2 4.6-8.1-0.4 0.6-57.3 0.6-57.3z;
                   
          m51.8 27.1c19.9-2.9 33.6 14.3 48.9 11.1 21.4-5.3 37.4-1.2 53.1 11 15 11.7 12.7 24.9 36.6 22 8.5-1 14.4 1.6 18.4 5.4-4-1.1-8.8 0.8-15 3.3-18.1 7.4-28.7 11.4-49.2 3.6-18.3-6.9-30.9-9-44.6-2.1-8 4.2-26.6 4.6-49.8 3-6.5-4.1 1.7-57.3 1.7-57.3z;
          
          m51.8 27.1c0 0 27.7-5 45.7 5.5 16.4 9.6 18.1 21.8 37 17.6 18.9-4.2 34.1 6.8 45.3 18.4 9.1 9.4 28.9 7.9 28.9 7.9 0 0-21.1 12.4-39.1 7.1-18.6-5.5-27.1 4.9-41.8 6.1-18.5 1.5-21.3-7.2-41.5-9.9-15.9-2.1-21.5 5.3-35.2 4.6-8.1-0.4 0.6-57.3 0.6-57.3z"            
  />
    </path>
 </svg>