This property defines a path.
usage
Category Path definition attributes
value
Variability Yes
Specification Documentation SVG 1.1 (2nd Edition)
The property d is actually a string that contains a series of path descriptions. These paths consist of the following instructions:
- Moveto
- Lineto
- Curveto
- Arcto
- ClosePath
These are combined in a string. These different commands are case-sensitive; A uppercase command indicates that its parameters are absolute positions, while lowercase commands indicate a point relative to the current position. A negative value can be specified as a parameter for the command: the negative angle will be counterclockwise, and the absolute x and y positions will be considered negative coordinates. The negative relative x value will move to the left, while the negative relative y value will move up.
Moveto
The Moveto command can be thought of as picking up a drawing pen and landing in another place. There is no line segment drawn between the previous point and this specified point. It's a good idea to start a path with a Moveto command, because without an initialized Moveto, the starting point will be where the previous operation occurred, which can lead to indeterminate behavior.
Syntax:
M x,y here x and y are absolute coordinates, representing horizontal and vertical coordinates respectively.
m dx, dy here dx and dy are the distances relative to the current point, to the right and down, respectively.
Example:
At absolute position x=50, y= 100:<path d="M50,100..." />
Move 50 to the right, 100 down: <path d="m50,100..." />
Lineto
Unlike the Moveto command, the Lineto command will draw a straight segment. This straight line segment moves from the current position to the specified position. The syntax of the native Lineto command is "L x, y" or "l dx, dy", where x and y are absolute coordinates, and dx and dy are the distances to the right and down, respectively. There are also the letters H and V, which specify horizontal and vertical movements, respectively. They have the same syntax as L, and their lowercase version is relative distance, and uppercase version is absolute position.
Curveto
The Curvto command specifies a Bézier curve. There are two types of Bézier curves: cubic and quadratic. A quadratic Bézier curve is a special cubic Bézier curve where the two ends of the control point are the same. The syntax of a quadratic Bézier curve is "Q cx, cy x, y" or "q dcx, dcy dx, dy". Cx and Cy are both absolute coordinates of control points, while DCX and DCY are the distances of control points in the X and Y directions, respectively.
The cubic Bézier curve follows the same concept as the quadratic Bézier curve, but it needs to consider two control points. The syntax of the cubic Bézier curve is: "C c1x, c1y c2x, c2y x, y" or "c dc1x, dc1y dc2x, dc2y dx, dy", where c1x, c1y and c2x, c2y are the absolute coordinates of the control points of the start and end points, respectively. DC1X, DC1Y, and DC2X, DC2Y are relative to the starting point, not to the end point. dx and dy are the distances to the right and down, respectively.
To connect smooth Bézier curves, you can also use the T and S commands. Their syntax is simpler than other Curveto commands because it assumes that the first control point is a reflection of the previous control point on the previous one, or that it is actually the previous point if there is no previous control point. The syntax of T is "T x,y" or "t dx,dy", which corresponds to absolute coordinates and relative distances respectively, and is used to create a quadratic Bézier curve. S is used to create a cubic Bézier curve, the syntax is "S cx, cy x, y" or "s dcx, dcy dx, dy", where (d)cx specifies the second control point.
Finally, all the Bézier curve commands can create a multi-sided Bézier graph, initialize the command first, and then specify all the parameters multiple times to create a multi-sided Bézier graph. Therefore, the following two commands can create the exact same path:
Arcto
Sometimes it is simpler to describe an elliptic arc curve path than a Bézier curve path. At the end of the day, the path element supports the Arcto command. The center of the arc is calculated by other variables. An arcto declaration is relatively a bit of a repetition of Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Deconstructing it, rx and ry are the radii in the x and y directions, respectively, and the value of LargeArcFlag is 0 or 1 to determine whether to draw a small arc (0) or a large arc (1). The SweepFlag is also either 0 or 1, which is used to determine whether the arc is clockwise (1) or counterclockwise (0). x and y are the coordinates of the destination. Although xAxisRotate supports changing the orientation of the x-axis relative to the current reference frame, this parameter does not seem to have much effect in Gecko 7.
ClosePath
The ClosePath command will simply draw a straight line from the current point to the first point in the current path. It is the simplest command and does not come with any parameters. It follows the shortest linear path to the start point, and if other paths fall on this path, the possible paths intersect. The syntax is "Z" or "z", and both writing methods have the same function.
element
The following elements can use the d attribute:
The same rules can be applied <animate>to animation paths.
Reminder
The origin (coordinate system 0,0 points) is often the upper left corner of the context. However<glyph>, the origin of the element is in the lower left corner of its letter box.
A comma is allowed between any two numbers, but not anywhere else.
example
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
To demonstrate what d="M37,17v15H14V17H37z M50,0H0v50h50V0z" actually means, let's discuss each subparagraph of this string.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
This property contains the strings that make up the entire SVG.
M37,17
M is the abbreviation of MoveTo. The uppercase "M" means absolute coordinates, and the lowercase "m" means relative distance. It implies that it is based on the start coordinates, the line is inside the box, and you start in the upper right corner of the rectangle inside the box.
37 is the abbreviation for the starting svg position, at 37 pixels on the X-axis.
17 Start svg position, at 17 pixels on the y-axis.
v15
v stands for vertical. The uppercase V indicates absolute coordinates, and the lowercase V indicates the relative length and distance. dx/dy and x/y can be used in the corresponding positions of H/V and h/v.
Here it is represented drawing a vertical line of 15 pixels relative to a given coordinate. It means that you draw 15 pixels down to coordinates 37,32.
H14
H stands for level, which is absolute coordinates because it is capitalized.
From the end of v15, draw a horizontal line until absolute coordinate 14 is reached, and end the line drawing when it reaches x-coordinate 14. The strokes are located at coordinates 14,32.
V17
Just like before, start from the end of the previous line and draw a vertical line until you reach y-axis coordinate 17. The strokes are located at coordinates 14,17.
H37
Finally, starting from 14,17, draw a horizontal line until you reach x-axis coordinate 37. The stroke is located at coordinates 37,17 (value of M)
z
Both lowercase and uppercase Z close a series of SVG segments.
,
A comma starts the next string of simple vector graphic segments. The next series of simple vector line segments will make the outer box.
M50,0
Start at x-axis 50 and y-axis 0.
H0
Draw a straight line until (0,0).
v50
Draw a vertical line of 0,0 pixels relative to 50. This line will be drawn to (0,50).
h50
Draw a horizontal line of 50 pixels relative to (0,-50). This line will be drawn to the right to (50,50).
V0
Draw a vertical line until you reach y-axis coordinate 0. This will draw a line to (50,0), which is the value of M.
z
Both lowercase and uppercase Z close a series of SVG segments.
Attach the code:
Finally, the link to the document is attached: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Posted on 5/4/2018 11:29:47 AM
|
|
|
|
