This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

Here is the SVG directory:

  • Front end will know will learn | SVG see this article is enough (a)
  • Front end will know will learn | SVG see this article is enough (2)
  • Front end will know will learn | SVG see this article is enough (3)
  • Front end will know will learn | SVG see this article is enough (4)
  • Front end will know will learn | SVG see this article is enough (5)
  • Front end will know will learn | SVG see this article is enough (6)
  • Front end will know will learn | SVG see this article is enough (7)
  • Front end will know will learn | SVG see this article is enough (8)
  • Front end will know will learn | SVG see this article is enough (9)
  • Front end will know will learn | SVG see this article is enough (10)
  • Front end will know will learn | SVG see this article is enough (11)
  • Front end will know will learn | SVG see this article is enough (12)

preface

Now, there are many ways to realize animation in web pages, such as native CSS3 animation, JavaScript animation… You can even use open-source libraries like Animate, Anime, magic, etc.

animation

A transform, a path change, a stroke, all of these things can be animated.

Some SVG animation libraries

  • GSAP
  • Snap.svg
  • SVG.js
  • anime.js
  • Velocity.js
  • D3

Before we look at animation, we’ll look at two properties that have something to do with the animation we’ll implement later. They are stroke-dasharray and stroke-dashoffset, both of which are associated with stroke in terms of attribute names.

stroke-dasharray

This property controls the length of the dash in the stroke. You need to pass in a parameter, which can be either a number or a sequence, as shown in the following example.

<line x1="0" x2="50" y1="10" y2="10" stroke-width="5" stroke="red" stroke-dasharray="5"></line>
<line x1="0" x2="50" y1="20" y2="20" stroke-width="5" stroke="red" stroke-dasharray="10"></line>
<line x1="0" x2="50" y1="30" y2="30" stroke-width="5" stroke="red" stroke-dasharray="5, 10"></line>
Copy the code

In the picture, each vertical line is 10px apart and 60px long. Let’s start with the first line, which has a stroke-dasharray value of 5, meaning that the line is spaced 5px for every 5px solid line length. Similarly, for every 10px solid line, there will be 10px distance.

The third line, in this case stroke-dasharray, is passed in two arguments separated by a space (or a comma can be used to separate arguments), the first argument refers to the length of the solid line, and the second argument is the distance between them. As you can see, the red line is spaced 10px apart for every 5px in length.

The fourth line passes in three parameters. The first two parameters are the same as above. The third parameter is the length of the solid line.

The fifth line passes in four parameters, but the parameters are the same, equivalent to 5 and 10.

stroke-dashoffset

This property is used for the offset of the starting point, with a positive value to the left and a negative value to the right, passing in a parameter that sets the offset value.

This property needs to be used with the stroke-dasharray property above, otherwise the offset will not be visible.

Let’s look at this example:

<line x1="10" x2="90" y1="10" y2="10" stroke-width="5" stroke="red" stroke-dasharray="20"; ></line>
<line x1="10" x2="90" y1="20" y2="20" stroke-width="5" stroke="red" stroke-dasharray="20"; stroke-dashoffset="To 10"></line
<line x1="10" x2="90" y1="30" y2="30" stroke-width="5" stroke="red" stroke-dasharray="20"; stroke-dashoffset="10"></line>
Copy the code

The first line is not set stroke-dashoffset, which defaults to 0.

The second line stroke-dashoffset value is set to -10, that is, the start of the line is offset 10px to the right.

The third line stroke-dashoffset value is set to 10, that is, the starting point of the line is shifted 10px to the left.

The last

This article introduces some animation libraries for SVG, as well as the stroke-Dasharray and stroke-Dashoffset properties, which are very common in SVG animations. Thank you for reading!

😀😀 follow me and don’t get lost! 😀 😀