Look at other people’s website SVG animation feel very comfortable, try to achieve the effect as follows:

The implementation needs to understand two CSS attributes for SVG

1. stroke-dasharray

Stroke – dasharray: < percentage > | < length > | inherit and separated by a comma or a gap between count, specify the dashed line and the length of the gap. Such as stroke – dasharray: 30 20; , the effect is as follows:

stroke-dasharray:50; If it’s a value then the dash is the same length as the gap

2. stroke-dashoffset

stroke-dashoffset: < percentage > | < length > | inherit specifies the dash pattern began to path distance, also is the offset If not write a stroke – dasharray properties, stroke – dashoffset properties even write the flowers can’t see effect. stroke-dasharray:50; Stroke-dashoffset :25px looks like this

The line has moved 25px to the left

Try stroke-Dasharray again :200; stroke-dashoffset:0px

Then the animation changes the stroke-Dashoffset value from 0 to 200 and the animation comes out

Click here for specific effects

3. The demo address

Finally, the address of the opening magnifying glass is attached

conclusion

Animation is actually achieved by stroke-Dashoffset value changes, and each line animation is actually one of an infinite number of notches, except that the rest are hidden outside SVG. Get the length of each path or other line (find the design), set both stroke-Dasharray and stroke-Dashoffset to the line length, at which point the line will disappear, and then animate stroke-Dashoffset to 0.

It would be my pleasure to be of any help to you. If have unreasonable place also ask everybody to give directions a lot