SVG <path> Path

The <path> element is a universal element used to define shapes. All basic shapes can be created using the <path> element. The SVG <path> element is used to draw advanced shapes composed of lines, arcs, curves, etc., with or without fill. This <path> element may be the most advanced and most general SVG shape, and it may also be the most difficult to master.

SVG Online Editor -　 SVG can be edited online, and source code can be converted from SVG.

Path Example

SVG <path> Simple example:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50
　　　　　　　　　　　　　A30,30 0 0,1　35,20
　　　　　　　　　　　　　L100,100
　　　　　　　　　　　　　M110,110
　　　　　　　　　　　　　L100,0"
　　　　　　　　　　style="stroke:#660000; fill:none;/>　　　　
</svg>

The result after running is as follows:

Note how the image includes an arc and two lines, and how the second line does not connect to the first arc and line.

All drawings with <path> elements are specified in the d attribute. The d attribute contains drawing commands. In the above example, M stands for 'Move to' command, A stands for 'Arc' command, and L stands for 'Line' command. These commands are provided to the 'virtual pen'. This pen can move and draw shapes, etc.

Set and move the pen

<path>d attribute should always be the move command. Before you can draw anything, you should move the virtual pen to some place. This is done using the M command. Here is a simple example:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50"
　　　　　　　　　　style="stroke:#660000; fill:none;/>
</svg>

This example moves the virtual pen to50,50 point. The next drawing command will start from this point.

Line

is the simplest command you can give to the <path> element. Drawing lines is done using the L and l (lowercase L) commands:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50        L100,100"
　　　　　　　　　　style="stroke:#660000; fill:none;/>
</svg>

This example starts from the point50,50 (the point of the M command) to the point100,100 (the point of the L command) to draw a line. The image effect after running is:

The difference between the L and l commands is that the uppercase version (L) draws a line to the absolute point passed to the command, while the lowercase version (l) draws a line to the relative point passed to the command. The relative point is the point before the line starts, plus the coordinates given by the l command.
If the virtual pen is located50,50, and you use l100,100 command, the line will be drawn as50+100,50+100=150,150. Regardless of the position of the virtual pen, using L100,100 command can accurately draw a line to100,100.

Drawing moves the virtual pen

The path shape is always drawn from the last virtual pen point to the new point. Each drawing command has an endpoint. After executing the command, the virtual pen point will be at the endpoint of the drawing command. The next drawing command will start from this point.

Arc

Drawing arcs using the <path> element is done with the A and a commands. Similar to lines, uppercase commands (A) use absolute coordinates as their endpoint, while lowercase commands (a) use relative coordinates (relative to the starting point). Here is an example:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50        A30,50 0 0,1　100,100"
　　　　　　　　　　style="stroke:#660000; fill:none;/>
</svg>

The result after running is as follows:

This example starts from the point50,50 to the point100,100 (specified last in the A command) to draw an arc.
The radius of the arc is set by the first two parameters in the A command. The first parameter is rx (radius in the x direction), and the second parameter is ry (radius in the y direction). Setting rx and ry to the same value will produce an arc. Setting rx and ry to different values will produce an elliptical arc. In the above example, rx is set to30, ry is set to50.
The third parameter set on the A command is the x-axis rotation (x-axis-rotation). Compared to the normal x-axis, this will set the rotation of the arc's x-axis. In the above example, the x-axis rotation is set to 0. Most of the time, you do not need to change this parameter.

The fourth and fifth parameters are the large arc flag (large-arc-flag) and the sweep flag (sweep-flag) parameter. The large arc flag (large-arc-flag) determines whether to draw the smaller or larger arc that meets the start point, end point, and rx and ry. Below is an example of drawing4example of a circle arc with a large arc flag (large-arc-flag) and the sweep flag (sweep-flag) combinations:

<svg　width="500"　height="120">
　　　　<path　d="M40,20 A30,30 0 0,0　60,70" style="stroke: #cccc00; stroke-width:2; fill: none; ">/path>
　　　　<path　d="M40,20 A30,30 0　1,0　60,70" style="stroke: #ff0000; stroke-width:2; fill: none; ">/path>
　　　　<path　d="M40,20 A30,30 0　1,1　60,70" style="stroke: #00ff00; stroke-width:2; fill: none; ">/path>
　　　　<path　d="M40,20 A30,30 0 0,1　60,70" style="stroke: #0000ff; stroke-width:2; fill: none; ">/path>
</svg>

The result after running is as follows:

can be40,20 to the point60,70 to draw four different arcs. One long arc, one small arc, and each small/The two mirrored versions of the large arc. The large arc flag determines whether to draw the large arc or the small arc. The sweep flag determines whether the arc is mirrored around the axis from the start point to the end point. In fact, the sweep flag controls the drawing direction of the arc (clockwise or counterclockwise), thus producing the 'mirrored' effect.

The first arc drawn is the yellow arc. Setting the large arc flag to 0 means drawing the smaller possible arc. The sweep flag is also set to 0, which means the arc will not be mirrored. Below is the yellow arc:

The second arc drawn is the red arc. Set the large arc flag to1means drawing the larger of the two possible arcs, ranging from40,20 to60,70. Below are the yellow and red arcs displayed together to illustrate the differences:

green and blue arcs (from all four arcs in the previous example) are the same as the yellow and red arcs, but drawn with the sweep flag (sweep-flag) is set to1This means that they will draw the same arc, but mirrored along the axis from the start point to the end point.

Quadratic Bezier curve

The <path> element can be used to draw quadratic Bezier curves. Drawing quadratic Bezier curves is done using the Q and q commands. Like lines, uppercase commands (Q) use absolute coordinates as their endpoint, while lowercase commands (q) use relative coordinates (relative to the starting point). Below is a simple example of a quadratic curve:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50　Q50,100　100,100"　
　　　　　　style="stroke:　#006666;　fill:none;"/></svg>

The result after running is as follows:

This example draws a quadratic Bezier curve from50,50 to the point100,100, the control point is50,200. The control point is the first parameter set on the Q command.

Control points pull the curve like a magnet. The closer a point on the curve is to a control point, the more the control point pulls in, which means it is closer to the control point. Here are some examples of drawing control points on the image:

In fact, if you draw a line from the starting point to the control point and then draw a line from the control point to the endpoint, the line from the middle of the first line to the middle of the second line is the tangent of the curve. Here is a picture that illustrates this:

Cubic Bezier curve

Use the C and c commands to draw cubic Bezier curves. Cubic Bezier curves are similar to quadratic Bezier curves, except they have two control points instead of one. Like lines, uppercase commands (C) use absolute coordinates as their endpoint, and lowercase commands (c) use relative coordinates (relative to the starting point):

<path　d="M50,50　C75,80　125,20　150,50"
　　　　　　style="stroke:　#006666;　fill:none;"/>

This is the result image with control points drawn, and the result after running is as follows.

You can create advanced curves using cubic Bezier curves:

Close path

The <path> element has a shortcut command for closing the path, which means a line from the last drawn point back to the first point. The command is Z (or z-There is no difference between uppercase and lowercase path closing commands):

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50　L100,50　L100,100　Z"
　　　　style="stroke:　#006666;　fill:none;"/></svg>

The result after running is as follows:

Combined commands

You can combine path commands within the same <path> element. Here is an example:

<svg　width="500"　height="225">
　　　　<path　d="M100,100　L150,100　a50,25　0　0,0　150,100　q50,-50　70,-170　Z"　style="stroke:　#006666;　fill:　none;"></path>
</svg>

This example draws a line, an arc, a quadratic Bezier curve, and closes the path with a line back to the starting point. The generated image is as follows:

Fill path

You can fill the path with the fill CSS property. Here is an example:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M100,100　L150,100　L150,150　Z"
　　　　　　style="stroke:　#0000cc;
　　　　　　　　　　　　　stroke-width:　2px;　　fill　　:　#ccccff;"/></svg>

The result after running is as follows:

Please note how the inside of the shape is filled with light blue.

Marker

You can use markers on the <path> element. Markers are small symbols at the start, middle, and end of the path, used to indicate the direction of the path. For example, there is a circle or square at the beginning of the path, and an arrow at the end.

Symbol shortcuts

If you need to use the same command repeatedly, you can omit the command letter and just provide a set of additional parameters, as shown in the command. Here is an example:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M10,10　　　l100,0　　0,50　　-100,0　　0,-50"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

This example shows how to pass other parameters to the l command, as if each parameter has an l in front of it. This also applies to other path commands. Below is the generated image:

Path Command大全

Below is SVG　pathElementList of possible pen commands.Each command consists of a letter and a set of numbers (coordinates, etc.), which are the parameters of the command.Uppercase commands usually interpret coordinate parameters as absolute coordinates.Lowercase commands usually interpret coordinate parameters as relative to the current pen position.