在 svg 中移动“路径”元素

Question

所以我试图制作一个图表并为其设置动画。 y 轴的数字必须从左移到图形，而 x 轴的数字必须从底部流向轴。

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

所以除了 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);
  }
}