SVG中的Animate标签不会触发预期的动画

编程问答 2022-08-12

问题描述

我现在正在为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,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,289.36a48.12,48.12,13.45,24.25A50.6,50.6,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,1,967,1750.91,54.74,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,14.4 z;
         M929.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

编辑：我试图重新组织价值观，但仍然没有运气。我不明白，我想念什么？

解决方法

两个观察结果：

您不需要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,990.03
             
             C872.5,990  901.6,988.2   922.7,960  978.2,979.1
             
             L980.9,1765.31 Z;


M929.78,990.03

             C872.5,1765.31 Z" begin="0s;" dur="1s" repeatCount="indefinite" />

    </path>

  </g>

</svg>

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

animationanimationhtmlsvgsvg-animatexmlxmlxmlxmlxmlxml