Html 问题：沿路径设置SVG动画

我想沿着路径设置一个形状的动画，我已经成功地创建了我想要的路径，但是，当我设置形状的动画以沿着路径移动时，它似乎沿着路径的第一部分反转。（原谅我，有点傻）

这就是代码

<svg>
    <rect x="-100" y="100" width="200" height="200" style="stroke: none; fill: #FFCC33;">
        <animateMotion path="M200,200
                       a-50,-50 0 0,0 0,-30
                       a-50,-50 0 0,1 0,-30"
                       begin="0s" dur="3s" repeatCount="indefinite" rotate="auto"/>
  </rect>
</svg>

实际上没有这样的问题（我应该相信它在做什么），所以不是真正的解决方案。但我将努力强调正在发生的事情，以及困惑所在。我认为这是因为旋转=“auto”和矩形的x，y被视为组合变换，如果你喜欢的话，因为它沿着路径设置动画。如果将x，y更改为0,0，它将高亮显示此项

为了让它更清晰一点，我将几个矩形与不同的x，y值组合在一起。其效果与将变换与旋转组合在一起时的效果相同

你会看到绿色的那个看起来是如何反转的，只是当旋转发生的时候，它离我们更远

这是一个快速的例子来强调发生了什么

可以在这里找到animationMotion元素描述，阅读“旋转”部分是值得的，但如果不习惯矩阵，可能需要一段时间才能理解它

<svg width="600" height="600">
    <path d="M200,200
     a-50,-50 0 0,0 0,-30
     a-50,-50 0 0,1 0,-30" fill="none" stroke="black"/>

 <rect x="0" y="0" width="200" height="200"
    style="stroke: none; fill: #FFCC33;">
  <animateMotion
          path="M200,200
     a-50,-50 0 0,0 0,-30
     a-50,-50 0 0,1 0,-30"
          begin="0s" dur="3s" repeatCount="indefinite"
          rotate="auto"
        />
</rect>
<rect x="-100" y="100" width="200" height="200"
    style="stroke: none; fill: #FF0000;">
  <animateMotion
          path="M200,200
     a-50,-50 0 0,0 0,-30
     a-50,-50 0 0,1 0,-30"
          begin="0s" dur="3s" repeatCount="indefinite"
          rotate="auto"
        />
 </rect>
    <rect x="-200" y="200" width="200" height="200"
    style="stroke: none; fill: #00FF00;">
  <animateMotion
          path="M200,200
     a-50,-50 0 0,0 0,-30
     a-50,-50 0 0,1 0,-30"
          begin="0s" dur="3s" repeatCount="indefinite"
          rotate="auto"
        />
 </rect>

</svg>

一个很好的问题。当我第一次使用animateMotion时，我非常困惑，因为我的矩形神秘地从视图中消失，并且只有在动画结束时才返回到其原始位置（幸运的是，我没有使用fill=“freeze”）。问题是，所有教程和示例都对动画对象使用x=“0”和y=“0”，这没有多大帮助

实际情况：当您沿路径设置对象动画时，其x和y位置指的是新的坐标系。其原点（点0,0）沿路径滑动，其轴（默认情况下）与全局轴平行-x轴水平，y轴垂直。指定rotate=“auto”时，轴会旋转，因此x轴与路径相切。实际上，动画对象不仅旋转，而且遵循完全不同的路径。请参见此草图：

现在已经清楚了，谢谢！：）有没有一种方法可以偏移形状，使它的中间沿着路径运行？