我正在尝试制作幼苗生长的动画。计划是让叶子沿着茎的路径生长（用虚线表示）。现在这个方法可行（经过一些尝试和错误）。但是，我希望叶子能够沿着路径旋转（从底部中心开始）（理想情况下，在移动时生长）。
当我将旋转设置为“自动”时，结果并不像我所预料的那样。
<svg width="150" height="150" viewBox="0 0 150 150">
<path fill="none" stroke="black" stroke-width="1px" stroke-dasharray="5" id="stem" d="m 29.7,149.1
c 0.3,-1 1.7,-8.6 -0.7,-20.1 -4.3,-20.6 -5.7,-48.9 42.1,-52"/>
<path id="leaves" d="M 8.5,132.8
C 14.3,133 16.4,132.5 19.9,135.4 23.2,138.2 29.6,144.2 28.5,148.6
L 29.6,149 30.4,149.2
C 32.6,144.2 35.2,140.7 39.3,137.4 43.7,133.9 49.6,133.2 56.9,133.1 56.9,133.1 47.1,126.3 39.5,129.3 31.1,132.8 33.8,138.4 29.7,148.4 29.6,143.6 27.9,132 22.8,130 16.5,127.5 8.5,132.7 8.5,132.7
Z">
<animateMotion
dur="1s"
repeatCount="1"
rotate="auto"
begin="leaves.click" fill="freeze" path="M 0,0
C 0.3,-1 1.7,-8.6 -0.7,-20.1 -5,-40.7 -6.4,-69 41.400002,-72.1"/>
</path>
</svg>我认为路径可能存在问题，因此我尝试使用相对路径和绝对路径，但两者的结果相同。