在 svg 中移动 'Path' 个元素

Question

所以我试图制作图表并制作动画。 y 轴数字必须从左侧移动到图形，而 x 轴数字必须从底部移动到轴。

html,csshttps://codepen.io/achillesalama/pen/XWaJywG

所以基本上一切正常，除了 class xNumbers，知道吗？

Answer 1

这里的offset path是错误的选择。元素跟随路径，并将旋转以匹配路径的方向。您的 X 动画使用垂直路径。所以发生的事情是您的文本正在旋转，因此它是垂直的，并且正在离开屏幕顶部。

Y 轴不受影响，因为路径是水平的，就像文本一样。

如果您希望元素沿着页面周围的复杂路径移动，您实际上只需要使用 offset-path。对于像这样简单的垂直和水平移动，使用简单的变换更有意义。

.xNumbers{
  transform: translate(0, 50px);
  animation: movex 2s ease forwards;
}

@keyframes movex {
  from{
    transform: translate(0, 50px);
  }
  to{
    transform: translate(0, 0);
  }
}

在 svg 中移动 'Path' 个元素

Move 'Path' element in svg

html

css

svg

path