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