SVG 三角形到圆形动画

Question

我目前正在尝试创建一个动画，其中三角形变成圆形然后再变回来。我当前的问题是，当它们相互变形时，线条会以不同的方式弯曲。

圆形和三角形之间的过渡

在此图像中，您可以看到左上角向外弯曲，而左下角向内弯曲。我正在努力使过渡是对称的。

我尝试更改控制点来调整曲线的功能，但我无法使过渡看起来对称。

对此有些新鲜，所以请原谅我的术语，但如果有人可以提供帮助，我将非常感激。

这是我当前的代码：

<svg width="50%" height="50%" viewBox="0 0 100 100">
  <path transform="scale(0.5)" transform-origin="center" style="transform-box: fill-box;">
    <animate 
       attributeName="d" 
       dur="3000ms" 
       repeatCount="indefinite"
       values="M 0,0 C 100,50 100,50 100,50 0,100 0,100 0,100
               0,50 0,50 0,50 0,0 0,0 0,0 Z;
                     
               M 50,0 C 77.5,0 100,22.5 100,50 100,77.5 77.5,100 50,100 22.5,100 0,77.5
               0,50 0,22.5 22.5,0 50,0 Z;
                     
               M 0,0 C 100,50 100,50 100,50 0,100 0,100 0,100
               0,50 0,50 0,50 0,0 0,0 0,0 Z;"/>
  </path>
</svg>

Answer 1

你已经很接近了。
对于更对称的变形动画，只需将 2 个三次贝塞尔曲线控制点分别“拉”到起始和结束坐标即可：

三角形路径

M 0 0 
C 0 0     100 50  100 50 
C 100 50  0 100   0 100 
C 0 100   0 50    0 50 
C 0 50    0 0     0 0 
Z

如你所见

1. 立方控制点坐标等于先前命令的路径点
2. 控制点与线段的终点重合

<svg width="50%" height="50%" viewBox="0 0 100 100">
  <path transform="scale(0.5)" transform-origin="center" style="transform-box: fill-box;">
    <animate 
       attributeName="d" 
       dur="3000ms" 
       repeatCount="indefinite"
       values="M 0 0 C 0 0 100 50 100 50 C 100 50 0 100 0 100 C 0 100 0 50 0 50 C 0 50 0 0 0 0 Z;
                     
               M 50,0 C 77.5,0 100,22.5 100,50 100,77.5 77.5,100 50,100 22.5,100 0,77.5
               0,50 0,22.5 22.5,0 50,0 Z;
                     
               M 0 0 C 0 0 100 50 100 50 C 100 50 0 100 0 100 C 0 100 0 50 0 50 C 0 50 0 0 0 0 Z;"/>
  </path>
</svg>