Recently we looked at the PATH tag in SVG, which is very powerful and can theoretically draw any graph. My memory is not very good, record the use of path syntax and their own understanding.

The path is introduced

Path uses the D attribute to describe a path. The syntax is as follows:

<svg>
	<path d="Path description" />
</svg>
Copy the code

The path description contains the following commands:

M = moveto moves to a certain point. L = lineto draw a lineto some point. Horizontal lineto draw a horizontal lineto a point. Draw a vertical lineto a point. Quadratic Bezier curveto is designed to smooth a quadratic Bezier curve. Quadratic Bezier curveto is designed to smooth a Bezier curve Curveto smooth three-fold Bezier curves A = Quasiperiodic Arc Z = Closepath Draw A straight line from the end point to the beginning point, forming A closed area.Copy the code

All commands above allow lowercase letters:

1. Uppercase indicates absolute positioning. The absolute reference point is the uppermost corner of SVG. 2. Lower case indicates relative positioning. The relative reference point is the previous position.Copy the code

Each command has its own parameters, as described below.

M (moveto) moves and L (lineto) draws straight lines

Where M means to move to a certain point, L means to draw a direct line to a certain point, followed by a coordinate point, in the following format:

D ="M x y" // M is the command: x, y d="L x y" // L is the command: x, yCopy the code

Many articles on the web come in various formats, such as:

Mx y Mx yCopy the code

A simple example:

<svg width="200" height="150" style="border:1px solid steelblue;">
	<path d="M 20 30 // move to the point L 180 120 // draw a line to the point 180 120" stroke="pink" fill="none"></path>
</svg>
Copy the code

Operation effect:

Horizontal lineto (H) and vertical lineto (V)

Where H is used to draw the horizontal line, y value remains unchanged from the previous point, so it is ok to give x value, as follows:

D ="H x" // H is the horizontal coordinate of command: xCopy the code

Where V is used to draw a vertical line, and the value of x remains the same as the previous point, so it is ok to give the value of y as follows:

D ="V y" // V is the command: y coordinatesCopy the code

A simple example:

<svg width="200" height="150" style="border:1px solid steelblue;">
	<path d="M 10 10 // move to (10 10) the point H 190 // draw a horizontal line to (190 10) the point V 140 // draw a vertical line to (190 140) the point" stroke="cadetblue" fill="pink"></path>
</svg>
Copy the code

Operation effect:

Z (cloasPath) close

Draw a straight line from the end point to the beginning point to form a closed region. The previous command is related to English words, this name has nothing to do with the word, probably C command is occupied.

The syntax is to put a Z at the end of the D attribute to indicate closure.

d="... Z"
Copy the code

Follow the example above and draw a closed line, then change the outline color and fill color:

<svg width="200" height="150" style="border:1px solid steelblue;">
	<path d="M 10 10 // move to (10 10) the point H 190 // draw a horizontal line to (190 10) the point V 140 // draw a vertical line to (190 140) the point Z // close" stroke="cadetblue" fill="pink"></path>
</svg>
Copy the code

Operation effect:

Quadratic Bezier curve Q (quadratic Bezier curveto)

Q represents the command for quadratic Bezier curve, which requires setting a control point and an end point. The syntax is as follows:

// Control point (x1,y1), end point (x,y)Copy the code

A simple example:

<svg width="200" height="150" style="border:1px solid steelblue;">
	<path d="M 10 10 // moves to the point Q 100 70, 190 10 // Control point (100 70), end point (190 10)" stroke="pink" fill="none"></path>

	<! -- Line (slope) -->
	<path d=" M 10 10 L 100 70 L 190 10 " stroke="# 888" stroke-dasharray="5" fill="none"></path>
</svg>
Copy the code

Operation effect:

The black line is the actual Bezier curve, and the dotted line is the slope.

T (smooth quadratic Bezier curveto) quadratic Bezier curve

The T command only needs to set an endpoint, and its control point is calculated from the previous Q command or T command.

D ="Q command T x y" // end point (x y), the control point is calculated by the previous Q commandCopy the code

A simple example:

<svg width="200" height="150" style="border:1px solid steelblue;">
	<path d="M 10 75 // move to (10 75) this point Q 55 10 100 75 // control point (55 10), end point (100 75) T 190 75 // end point (190 75), the controller is calculated by the previous Q command" stroke="black" fill="none"></path>
	
	<! -- Q command to help check line (slope) -->
	<path d=" M 10 75 L 55 10 L 100 75 " stroke="blue" stroke-dasharray="5" fill="none"></path>
	<! -- T command help check line (slope) -->
	<path d=" M 100 75 L 145 140 L 190 75 " stroke="pink" stroke-dasharray="5" fill="none"></path>
</svg>
Copy the code

Operation effect:

Among them:

The black color is the bezier curve actually drawn. The blue dotted line is the slope of the Q command. The dotted pink line is the slope of the T command, where the control points are computed by the computer.Copy the code

C (Curveto) Three Bezier curves

Compared with the quadratic Bezier curve, the cubic Bezier curve is one more control point, which is well expressed in a graph drawn by MDN:

With two control points, you can draw an arbitrary curve. Syntax format:

D ="C x1 y1, x2 y2, x y"Copy the code

A simple example:

<svg width="200" height="150" style="border:1px solid steelblue;">
	<path d="M 10 10 // move to (10 10) this point C 20 130, 160 130, 170 20 // Control point 1(20 130), control point 2(160 130), end point (170 20)" stroke="black" fill="none"></path>
	
	<! -- C command assist view line (slope) -->
	<path d=" M 10 10 L 20 130 M 160 130 L 170 20 " stroke="blue" fill="none" stroke-dasharray="5"></path>
</svg>
Copy the code

Operation effect:

S (smooth curveto) smooths three Bezier curves

This is similar to the T command, where T is short for Q and S is short for C. For comparison, let’s put the C and S command formats together.

D ="C x1,y1 x2, y2x,y" // Control point 1 (x1,y1), control point 2 (x2,y2), endpoint (x,y) d="S x2, y2x,y" // S only control point 2 is okCopy the code

For a simple example, we also draw auxiliary lines for easy viewing:

<svg width="200" height="150" style="border:1px solid steelblue;">
	<path d="M 10 75 C 30 10, 80 10, 100 75 // Control point 1(30 10), control point 2(80 10), end point (100 75) S 170 140, 190 75 // Control point 2(190 75), end point (190 75)" stroke="black" fill="none"></path>

	<! -- C command assist view line (slope) -->
	<path d=" M 10 75 L 30 10 M 80 10 L 100 75 " stroke="blue" fill="none" stroke-dasharray="5"></path>
	<! -- S command assist view line (slope) -->
	<path d=" M 100 75 L 120 140 M 170 140 L 190 75 " stroke="pink" fill="none" stroke-dasharray="5"></path>
</svg>
Copy the code

Operation effect:

Among them:

The dotted line of the fan is the auxiliary line of S. 120, 140 is what the computer computed.Copy the code

Slabs A (Octagonal)

The A command can also be used to draw arcs, which can be understood as part of A circle or ellipse.

The syntax is as follows:

d="A rx ry x-axis-rotation large-arc-flag sweep-flag x y" 
Copy the code

Among them:

Rx ry is the x-radius and y-radius of the ellipse. The X-Axis-rotation is the rotation Angle of the ellipse relative to the coordinate system. Large-arc-flag indicates whether to draw large arc (1) or small arc (0) parts. Sweep-flag is flagged in a clockwise (1) or counterclockwise (0) direction. X and y are coordinates of the end of the arc.Copy the code

Rx and rx are easy to understand. Finally, x and Y are easy to understand. The key is the middle three parameters: X-Axis-rotation, large-Arc-flag, and sweep-flag.

Large-arc-flag and sweep-flag parameters

Here we break through the large-Arc-flag and sweep-flag parameters. Each parameter has two values, so there are four cases in combination. Let’s look at each case one by one.

**1) **large-arc-flag=0(small arc), sweep-flag=0 (counterclockwise).

Let’s first look at the case where both of them are 0:

<svg width="200" height="150" style="border:1px solid steelblue;">
	<! -- Black arc -->
	<path d="M 120 45 A 60 45 0 0 0 80 125 // large-arc-flag=0(small arc), sweep-flag=0 (counterclockwise)" stroke="black" fill="none"></path> 
</svg>
Copy the code

Operation effect:

It’s not easy to see what this means, but why draw a line like this? What are the rules? Let’s do it with both ones.

**2) **large-arc-flag=1(large arc), sweep-flag=1 (clockwise).

Add an arc, the same as in the example above, to adjust these two parameters:

Large-arc-flag =1(large arc), sweep-flag=1 (clockwise)Copy the code

Then set the color to blue:

<! -- Blue Arc -->
<path d="M 120 45 A 60 45 0 1 1 80 125 // large-arc-flag=1(large arc), sweep-flag=1 (clockwise)" stroke="blue" stroke-dasharray="2" fill="none"></path>
Copy the code

Operation effect:

Now it’s a little bit clear that two points on an ellipse can be drawn clockwise with a larger arc, or counterclockwise with a smaller arc, and the two arcs are combined to form an ellipse.

What about the other two sets of parameters? Let’s see again.

**3) **large-arc-flag=0(small arc), sweep-flag=1 (clockwise).

Add another curve, the same as the curve in the example above, to adjust these two parameters:

Large-arc-flag =0(small arc), sweep-flag=1 (clockwise)Copy the code

Then set the color to pink:

<! -- Pink Arc -->
<path d="M 120 45 A 60 45 0 0 1 80 125 // large-arc-flag=0(small arc), sweep-flag=1 (clockwise)" stroke="pink" stroke-dasharray="4" fill="none"></path> 
Copy the code

Operation effect:

It becomes even clearer over here, that the pink arc is actually symmetric with the black arc.

I guess I can guess the last one. Fill in the last one.

**4) **large-arc-flag=1(large arc), sweep-flag=0 (counterclockwise).

Add another curve, the same as the curve in the example above, to adjust these two parameters:

Large-arc-flag =1(large arc), sweep-flag=0 (counterclockwise)Copy the code

Then set the color to dark pink:

<! -- Dark pink arc -->
<path d="M 120 45 A 60 45 0 1 0 80 125 // large-arc-flag=1(large arc), sweep-flag=0 (counterclockwise)" stroke="deeppink" stroke-dasharray="6" fill="none"></path>
Copy the code

Operation effect:

So that’s the end of these two parameters.

x-axis-rotation

This parameter is used for rotation and can be positive and negative:

Integers represent rotation in time. A negative number indicates a counterclockwise rotation.Copy the code

Let’s rotate the above example by 30 degrees clockwise:

<svg width="200" height="150" style="border:1px solid steelblue;">
	<! -- Black arc -->
	<path d=" M 120 45 A 60 45 30 0 0 80 125 " stroke="black" fill="none"></path>

	<! -- Blue Arc -->
	<path d=" M 120 45 A 60 45 30 1 1 80 125 " stroke="blue" stroke-dasharray="2" fill="none"></path>

	<! -- Pink Arc -->
	<path d=" M 120 45 A 60 45 30 0 1 80 125 " stroke="pink" stroke-dasharray="4" fill="none"></path>

	<! -- Dark pink arc -->
	<path d=" M 120 45 A 60 45 30 1 0 80 125 " stroke="deeppink" stroke-dasharray="6" fill="none"></path>
</svg>
Copy the code

Operation effect:

Counterclockwise is the same thing, but I’m not going to do it anymore.

The relative position

All of the examples I showed you before are absolute positions, and relative positions are very simple, so let’s write an example and see. Let’s take the example where we started with a line, and then we move to relative positioning.

<! -- Absolute location -->
<svg width="200" height="150" style="border:1px solid steelblue;">
	<path d=" M 20 30 L 180 120 " stroke="pink" fill="none"></path>
</svg>
Copy the code

L here is the absolute position 180, 120, relative to the coordinates 0, 0 in the upper left corner of SVG, so relative is written as:

L point (180 120) -M point (20 30) = relative position (160 90)Copy the code

Then change the color to dark pink to facilitate the effect. Finally, the code is given:

<! -- Relative positioning -->
<svg width="200" height="150" style="border:1px solid steelblue;">
	<path d="M 20 30 l 160 90 // stroke="deeppink"></path>
</svg>
Copy the code

Operation effect:

The principle of the other commands is similar and will not be repeated.

The path command is used to create the path command.

The resources

MDN SVN Path: developer.mozilla.org/zh-CN/docs/…