1. Introduction

Recently, I just learned SVG and saw the animation effect of a neon light, which felt cool, so I happened to follow the article. Although it was realized, I was not very clear about stroke-Dasharray and stroke-Dashoffset attributes. I finally understood them through searching materials and reading documents, hoping it would be helpful to everyone

2. Attribute functions

We know that SVG is drawing, so the stroke property series is the brushes. Stroke-dasharray and stroke-dashoffset are two attributes of stroke

stroke-dasharray

define

The official document explains: The stroke-dasharray property controls the pattern of dashes and gaps used to form the shape of a path’s stroke. As I understand it: stroke-dasharray is to control the strokes of the brush, and to control the painting through solid and dashed lines

scope

This works on Shape and Text Content Elements

parameter

Now let’s focus on his parameters, and this is probably the most confusing part. Dasharray is an array of line segments, and its parameters can be an array. **The first value and every second value in the list after it specifies the length of a dash, And every other value specifies the length of a gap between the dashes. ** Means that the single value represents the length of the solid line and the double value represents the length of the dashed line

example

Each of the large squares in the image below is 100px long, and the line segments start at 200px

stroke-dasharray: 0;
Copy the code

Stroke-dasharray does not work at this point, note: this property is invalid when its argument <=0

stroke-dasharray: 20;
Copy the code

As you can see, the length of the solid line is 20px. Why is there a dotted line that is also 20? If the list has an odd number of values, then it is repeated to yield an even number of values. That is, if the number of arguments is singular, a copy of the arguments will be copied by default. For example, 1, 2, 3 will be 1, 2, 3, 1, 2, 3

troke-dasharray: 120;
Copy the code

In the case of one parameter the dashed line and the solid line should be the same length and this is the unequal length, so it makes sense to draw the line segment, and the excess will be hidden. But if it’s a closed graph, the result is the same

This is one parameter and it’s the same thing with multiple parameters, which are essentially drawn in terms of the length of the solid line and the dotted line, so I’m not going to test this.

If you want to know the length, you can use js to get the pathLength attribute of the Path element. If you want to know the length, you can use js to get the pathLength attribute of the Path element

var path = document.querySelector('path');
var length = path.getTotalLength();
Copy the code

stroke-dashoffset

Understanding stroke-Dasharray makes it easy to understand stroke-Dashoffset

define

Official documents: The stroke-dashoffset property specifies the distance into the repeated dash pattern to start the stroke dashing at the beginning of the path. If the value is negative, then the effect is the same as dash offset d: The amount offset from the drawing starting point is positive (right or clockwise) and negative (left or counterclockwise)

Offset calculation formula:

D = s - | 'stroke - dashoffset | mod s d: offset s:' stroke - dashoffset ': the total length of line segment parameter valuesCopy the code

From the formula, we can see that the offset is the value of an interval. No matter how large the parameter value is, the offset cannot be greater than the total length of the line segment

scope

The same works on Shape and Text Content Elements and supports animation for cool effects

parameter

The offset is the offset of a positive (left or counterclockwise)/ negative (right or clockwise) offset of the stroke-dashoffset parameter, since the actual stroke-dashoffset parameter is not greater than the line length.

example

stroke-dasharray: 120;
stroke-dashoffset: 0;
Copy the code

The above is the initial state, with a parameter of 0 and no offset

stroke-dasharray: 120;
stroke-dashoffset: 20;
Copy the code

When the parameter is 20, the mod 200 = 180 has shifted 180px to the right, and the line segment has moved 20px to the left, so we can understand that it has shifted the parameter value to the left. The closed graph is counterclockwise, so you can try it yourself. Negative values are also shown in the following figure

stroke-dasharray: 120;
stroke-dashoffset: -20;
Copy the code

conclusion

Here we have a basic understanding of the use of stroke-Dasharray and stroke-Dashoffset attributes and the meaning of the parameters. Since stroke-Dashoffset is closed loop, we can use animations to create cool SVG effects such as neon fonts

The first time in nuggets to write an article, typesetting problems many forgive!

The resources

Zhang Xinxu – Xin Space W3 official document