SVG–；沿路径设置矩形动画；矩形的中心始终在路径上

我想制作一个矩形的动画，使它沿着一条给定的路径，这条路径到目前为止一直使用

animateMotion

。这就是我得到的：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
   <rect height="40" width="40" style="fill:#777; stroke:none;"/>
   <animateMotion fill="freeze" path="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" dur="3.14159s" repeatCount="indefinite"/>
</g>
<path d="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" style="fill:none;stroke:#F00;stroke-width:5"/>

---

现在我的问题是：如何让矩形沿着路径（已经实现）移动，而矩形（

20

）的中心始终位于路径上？这可以通过SVG提供的方法实现吗？

当然，只需向rect添加一个转换即可

html、正文、svg{
身高：100%；
宽度：100%；
}

如果您只需在工作解决方案中添加一个指向活动小提琴的链接，您的答案会有多酷。它成功了，谢谢。但是为什么呢？我知道

翻译部分通常做什么，但不明白它为什么在这种情况下工作，并且做了我打算做的事情。@RobertLongson怎么做？你的回答似乎说明了一点，你收到的反馈建议不要添加小提琴链接，对吗？如果是这样的话，听起来很奇怪…@MorganWilde它现在是一个堆栈片段，所以它将在这里运行。