SVG animateMotion的rotate="auto"未按预期工作，幼苗生长动画问题

核心问题分析 #

你遇到的旋转不符合预期，本质是叶子的变换原点不对——默认情况下SVG元素的旋转原点是自身边界框的左上角，而非你需要的底部中心；同时手动复制的移动路径和茎路径存在偏差，也会导致轨迹错位。

修正后的代码 #

<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"
       style="transform-box: fill-box; transform-origin: bottom center;">
    <!-- 直接引用茎的路径，避免手动复制偏差；auto-reverse让叶子方向贴合茎的走向 -->
    <animateMotion
      dur="1s"
      repeatCount="1"
      rotate="auto-reverse"
      begin="leaves.click" 
      fill="freeze" 
      href="#stem"/>
    <!-- 同步添加生长动画，从缩放0到1 -->
    <animateTransform
      attributeName="transform"
      type="scale"
      from="0"
      to="1"
      dur="1s"
      begin="leaves.click"
      fill="freeze"
      additive="sum"/>
  </path>
</svg>

关键修改点 #

1. 修正旋转原点：通过transform-box: fill-box和transform-origin: bottom center，让叶子以自身底部中心为支点旋转，贴合茎生长的自然姿态。
2. 复用路径轨迹：用href="#stem"直接引用茎的路径，彻底避免手动复制路径带来的轨迹偏差。
3. 调整旋转方向：rotate="auto-reverse"让叶子的y轴沿路径切线方向，比默认的auto更符合植物生长的视觉逻辑。
4. 添加生长动画：同步执行的scale变换动画，实现叶子移动过程中逐渐长大的效果。

内容的提问来源于stack exchange，提问作者Bumbling Badger