Introduction to SVG technology: the principle of line animation implementation

I believe that we have seen such a magical technology: a pair of lines composed of drawings can automatically draw their own. It's really cool. Jake Archibald is the originator of this SVG technology and has written a very good article to describe how it is implemented. Brian Suda also discussed it on the ways website. Polygon uses it to create a very magical effect in a design article. Codrops also made some very beautiful examples.

In fact, I have nothing to add, just want to make this technology more clear, so, here I will use my way to explain this technique again.

1. You have an SVG graphic

2. This graphic must have a line (stroke) property

3. Lines can be dashed

We can do it in illustrator or programmatically. We use CSS to set the style of these paths (assuming we are inline SVG here, or through one <object> ) and turn them into dashed forms.

< SVG  ... >  <path class=< Span class= "token punctuation" > "Path" stroke= "#000000 "  ... >  </svg>          

{  stroke-dasharray:;}   

This is the length of each small line in the dashed line is 20px.

4. You can make the length of the dash small segment longer ....

{  stroke-dasharray: +;}   

5. We can also set the "offset" offset for our lines, which will cause the position of small segments in the dashed line to move.

When we dynamically set the "offset" value of a line in a drawing, we can see this effect:

It can be implemented in such a simple way:

{  stroke-dasharray: +;  animation: Dash 5s linear;} stroke-dashoffset:           +}}

6. Imagine that when the dotted line is long enough to exceed the entire line length of the graphic

Nothing changes, the entire image does not look like a dashed line at all. You only need to stroke-dasharray set the property long enough to exceed the length of the entire line.

7. Now set the offset to the line so that it no longer covers the entire graph.

So you can't see the graphics.

8. Now dynamically slowly return the offset of the line to 0

If you pass CSS, you need to animation set the property so that the forwards entire animation will stop in its final state.

. Path { Stroke-dasharray: +; stroke-dashoffset: +; animation: Dash 5s linear forwards;} @keyframes Dash { to { Stroke-dashoffset: 0; }}< /c1>

tada!

Example Demo

Why use JavaScript?

Most of the SVG line animations you see use JavaScript. This is because in reality it's hard to know how long the line is. What we set here is 1000 because it happens to be 1000.

The way to get the length value using JavaScript is this:

= document.  Queryselector('. path ');  = Path.  Gettotallength();           

And then you can use that value for free. The articles that are linked at the top of the text speak more thoroughly than this article, and you'd better refer to those articles. I just want to talk a little bit about this technique and hopefully it will give you some inspiration.

(English: How to SVG line Animation Works.)

Introduction to SVG technology: the principle of line animation implementation