SVG animación de ruta de línea a comando de curva cúbica-bezier
Estoy tratando de animar un svg<path>
elemento. La inicial<path>
elemento tieneL(lineto)
comandos mientras que<path>
que estoy tratando de animar tieneC(cubic-bezier curve)
comandos. He intentado animarlo, pero en realidad no hace la transición entre los dos caminos. ¿Es posible algo así?
<svg>
<path id="path" d="M0,50 L25,40 L50,60 L75,40 L100,60 L125,40 L150,50" fill="none" stroke-width="2" stroke="#000" />
<animate xlink:href="#path"
attributeName="d"
dur="3s"
from="M 0 50 L 25 40 L 50 60 L 75 40 L 100 60 L 125 40 L 150 50"
to="M 0 80 C 25 55 50 55 75 80 C 100 105 125 105 150 80"
repeatCount="indefinite" />
</svg>