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

Question

我刚刚开始使用 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

Answer 1

问题是像这样的运动路径动画通过重新定位圆圈使其跟随路径来工作。它通过简单地将圆圈移动与特定时间点路径的 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

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

Offset when following svg motion path

css

svg

anime.js