svg 中的动画标签不会像预期的那样触发动画

Question

我正在尝试为 svg 路径制作动画大约 3 天......

当我使用<animate> 标签时，会发生转换，但是它会在没有任何动画的情况下从位置 A 到位置 B。

我想在两者之间进行过渡，这样看起来很流畅。我该怎么办？

<div class="container">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 167 1888.69">
  <defs>
    <style>
      .cls-1 {
        fill: #f2f2f2;
      }

      .cls-2 {
        fill: #65bec0;
      }

      .cls-3 {
        fill: #88d3cd;
      }

      .cls-4 {
        fill: #60b9bc;
      }
    </style>
  </defs>
  <path id="glass" class="cls-1" d="M927.2,52.82c16.15,0,30.77,5.53,41.37,14.51s17.13,21.38,17.13,35.08l.3,1620.4c0,27.38-26.19,49.6-58.49,49.6-16.15,0-30.77-5.53-41.37-14.51S869,1736.52,869,1722.83l-.3-1620.4C868.71,75,894.9,52.83,927.2,52.82Z" transform="translate(-819 -52.82)"/>
  <path class="cls-2" d="M881.46,1086.43h.09l-.09.06Z" transform="translate(-819 -52.82)"/>
  <path id="back-liquid" class="cls-3" d="M925.15,1767.18c27.63.11,50.13-21.59,50.23-48.44L977,1285.27l.51-294.54s-26.11-2.52-49.22-16.49c-12.79-7.73-48.11,12.32-55.73,15.79l3.75,449.17,0,289.36a48.12,48.12,0,0,0,13.45,24.25A50.6,50.6,0,0,0,925.15,1767.18Z" transform="translate(-819 -52.82)"/>



  <g id="front-liquid">
    <path class="cls-4"  transform="translate(-819 -52.82)">
      <animate
        id="poi_front_1"
        attributeName="d"
        values="M929.78,1765.31c-29.07.12-52.74-21.56-52.87-48.42l-2-433.46-.74-294.54s28.27,1.81,51-14.37c14.77-10.5,47,4.34,53.86,15.48l1.87,447.29.17,289.36A47.56,47.56,0,0,1,967,1750.91,54.74,54.74,0,0,1,929.78,1765.31Z;
        m 929.78,1765.31 c -29.07,0.12 -52.74,-21.56 -52.87,-48.42 l -2,-433.46 -2.35,-293.4 c 0,0 29.04531,-29.79622 50.10593,-17.59673 31.46382,10.78462 34.47963,16.02568 55.52938,6.71575 L 980.9,1437.29 l 0.17,289.36 c -2.14495,9.3171 -7.04817,17.7714 -14.07,24.26 -10.15255,9.3127 -23.4433,14.4547 -37.22,14.4Z"
        begin="0s; poi_front_2.end"
        dur="1s"
        />
      <animate
        id="poi_front_2"
        attributeName="d"
        values="m 929.78,1765.31 c -29.07,0.12 -52.74,-21.56 -52.87,-48.42 l -2,-433.46 -2.35,-293.4 c 0,0 29.04531,-29.79622 50.10593,-17.59673 31.46382,10.78462 34.47963,16.02568 55.52938,6.71575 L 980.9,1437.29 l 0.17,289.36 c -2.14495,9.3171 -7.04817,17.7714 -14.07,24.26 -10.15255,9.3127 -23.4433,14.4547 -37.22,14.4 z;
         M929.78,1765.31c-29.07.12-52.74-21.56-52.87-48.42l-2-433.46-.74-294.54s28.27,1.81,51-14.37c14.77-10.5,47,4.34,53.86,15.48l1.87,447.29.17,289.36A47.56,47.56,0,0,1,967,1750.91,54.74,54.74,0,0,1,929.78,1765.31Z"
        begin="poi_front_1.end"
        dur="1.5s"
        />
      </path>
  </g>
</svg>
</div>

html,body {width:100%; height:100%;}
.container{
 width: 80%;
height: 80vh;
 margin:auto;
}
svg {
width: 60%;
height:80vh;
margin: auto;
}

这是我的 svg 的 codepen 演示：https://codepen.io/knudsem/pen/oNxoxrB

编辑：我尝试重新组织值，但仍然没有运气。我不明白，我错过了什么？

Answer 1

两个观察结果：

您不需要 2 个动画。您可以使用包含 3 个值的列表来代替动画： values ="v1;v2;v1" 这与 repeatCount="indefinite" 一起可以解决问题。

其次：在这种情况下，路径应该相同，除了中间的 C 和 S 命令。您需要以相同的顺序保持相同的命令，只更改曲线控制点的 y 值。

此外，由于我手动更改了 d 属性，因此我使用此转换器将其转换为所有绝对值：https://codepen.io/leaverou/pen/RmwzKv

<svg viewBox="0 850 167 1888.69">

  <g id="front-liquid">

    <path transform="translate(-819 -52.82)" stroke="red" stroke-width="5" fill="none" d="
             M929.78,1765.31
             C900.71,1765.43,877.04,1743.75,876.91,1716.89
             L874.91,990.03
                         
             C872.5,990 901.6,950.2,922.7,972.4
             S957.1,988.4,978.2,979.1

             L980.9,1726.65
             C978.925,1735.9671,974.022,1744.42,967,1750.91
             C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z">

      <animate attributeName="d" values="M929.78,1765.31
             C900.71,1765.43,877.04,1743.75,876.91,1716.89
             L874.91,990.03
             
             C872.5,990  901.6,988.2   922.7,972.4
             S957.1,960  978.2,979.1
             
             L980.9,1726.65
             C978.925,1735.9671,974.022,1744.42,967,1750.91
             C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z;


M929.78,1765.31
             C900.71,1765.43,877.04,1743.75,876.91,1716.89
             L874.91,990.03
                         
             C872.5,990 901.6,950.2,922.7,972.4
             S957.1,988.4,978.2,979.1

             L980.9,1726.65
             C978.925,1735.9671,974.022,1744.42,967,1750.91
             C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z;


M929.78,1765.31
             C900.71,1765.43,877.04,1743.75,876.91,1716.89
             L874.91,990.03

             C872.5,990  901.6,988.2   922.7,972.4
             S957.1,960  978.2,979.1

             L980.9,1726.65
             C978.925,1735.9671,974.022,1744.42,967,1750.91
             C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z" begin="0s;" dur="1s" repeatCount="indefinite" />

    </path>

  </g>

</svg>

我删除了非动画路径并更改了 viewBox 值，以便能够看到形状的相关部分。你可以变回原来的样子，