我刚刚开始使用svg和动漫.js。我正在尝试使用自己的资产重新创建文档中的 svg 运动路径。不过，我没有使用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
问题在于，像这样的运动路径动画通过重新定位圆使其遵循路径来工作。 它只需将圆移动对应于特定时间点路径的 X，Y 坐标的量即可实现。
但是，由于您的圆向下绘制并位于 SVG 原点 (0,0( 的右侧(即左上角(，因此它被定位在它应该在的路径上的点的右侧。
有几种解决方案。 这里有一对：
1. 重新定位(重绘(圆，使其以原点为中心
<path class="circle" fill="none" stroke="#000" d="M8.000,0.000
C8.000,0.000 8.000,-8.000 0.000,-8.000 C-8.000,-8.000 -8.000,0.000 -8.000,0.000
C-8.000,0.000 -8.000,8.000 0.000,8.000 C8.000,8.000 8.000,0.000 8.000,0.000 Z"/>
https://codepen.io/PaulLeBeau/pen/eKqKRW
2. 重新定位(带变换(圆圈，使其以原点为中心
<g class="circle">
<path ... transform="translate(-8,-8)"/>
</g>
我们需要在这里使用一个组，以便我们添加的transform不会被 anime.js 应用的转换覆盖。
https://codepen.io/PaulLeBeau/pen/eKqKBv