跟随SVG运动路径时的偏移量

我刚刚开始使用svg和anime.js。我正试图重现 svg motion path 在文档中找到了我自己的资产。不过,我没有使用div来跟踪路径,而是使用另一条路径。

我有一条简单的s形路径和一条圆形路径。我遇到的问题是,当圆绕着路径中的弯曲处旋转时,它有某种偏移。

<svg width="256" height="112" viewBox="0 0 256 112">
    <path class="path" fill="none" stroke="#000" d="M0.500,64.500 L48.500,64.500 C48.500,64.500 64.500,64.500 64.500,48.500 C64.500,32.500 48.500,32.500 48.500,32.500 L40.500,32.500 C40.500,32.500 24.500,32.500 24.500,16.500 C24.500,0.500 40.500,0.500 40.500,0.500 L88.500,0.500 "/>
    <path class="circle" fill="none" stroke="#000" d="M16.000,8.000 C16.000,8.000 16.000,-0.000 8.000,-0.000 C-0.000,-0.000 -0.000,8.000 -0.000,8.000 C-0.000,8.000 -0.000,16.000 8.000,16.000 C16.000,16.000 16.000,8.000 16.000,8.000 Z" style="position: absolute;"/>
</svg>

var path = anime.path('.path');

anime({
  targets: '.circle',
    translateX: path('x'),
    translateY: path('y'),
  duration: 4000,
  loop: true,
  easing: 'linear'
});

我看过这个例子,想弄清楚为什么会这样。我已经添加了绝对定位,就像它在使用,但它仍然有偏移,我不知道为什么。我也尝试过将路径和圆分离为单独的svg,但这似乎也不起作用。

有谁能向我解释这是为什么以及如何解决它?我希望圆圈沿着中间的路径移动。谢谢。

密码笔: RJXabe