How to make a polyline appear smoothly with a caption in svg?

Question

css

Hello. I did not find a simple and sensible tutorial on svg animation. Tell me how to animate a broken line and a signature in svg as in the picture (the arrows show how the animation of the appearance of the line should go)?

Answer 1

Alexander : note:
- Animation through the property stroke-dasharray: 1000; doesn't work in half the browsers.
- Animation with the animate tag suggested by Drm is a more cross-browser option.
- By the way, your animation is very simple, it can be done without svg, using css3. Here is an example for you

Answer 2

If I understand you correctly, then, respectively, combine two lines into one path and animate it by increasing the stroke-dashoffset property