Move 'Path' element in svg-CodePudding

so i was trying to make a graph and animate it. the y axis numbers must move from left to the graph as for the x axis the numbers must flow from the bottom to the axis.

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

so basically everything is working except for the class xNumbers, any idea?

CodePudding user response：

An offset path is the wrong choice here. Elements follow the path, and will rotate to match the direction of the path. Your X animation is using a vertical path. So what is happening is that your text is being rotated so it is vertical, and is moving off the top of the screen.

The Y axis wasn't affected because the path was horizontal, just like the text.

You really only need to use offset-path if you want an element to follow a complicated path around the page. For simple vertical and horizontal moves like this, it makes more sense just to use a simple transform.

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

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