Question

我是SVG的新手，正尝试反向运行动画，而不是从头开始。有没有办法使用SMIL做到这一点，还是我应该切换到关键帧？

`https://codepen.io/anon/pen/LayQRL`

谢谢所有的帮助！

Answer 1

您可以这样使用values属性而不是to：红色路径就是您所拥有的，蓝色路径正在使用3 values

我希望这就是你要问的。

svg {
 border:1px solid;
}

<svg width="200" viewBox="0 0 849 681">
       
    <path fill="red" d="M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z" id="path-2">
      <animate attributeName="d" dur="5000ms" repeatCount="indefinite" to="M44.2832799,.535103 C157.481114,64.166986 100.550155,550.259161 500.490405,700.811627 C812.90078,787.640326 488.600718,1162.61771 1328.65457,953.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z" rotate="auto" keyPoints="1;0">
      </animate>
    </path>
 
</svg>

<svg viewBox="0 0 849 681" width="200">
         
    <path fill="skyblue" d="M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z" >
      <animate attributeName="d" dur="5000ms" repeatCount="indefinite"
         values="M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z;
                 
          M44.2832799,.535103 C157.481114,64.166986 100.550155,550.259161 500.490405,700.811627 C812.90078,787.640326 488.600718,1162.61771 1328.65457,953.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z;
                 
          M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z "      
      />
  </path>
  
</svg>

基于路径的反向Smil动画

1 个答案: