SVG path 标签简介

Paths

Paths represent the outline of a shape which can be filled, stroked, used as a clipping path, or any combination of the three[1].

d

d = “path data”. The definition of the outline of a shape.

Pen Command

M(move to)

Command	Parameters	Repeatable	Explanation
M (absolute)	x, y	Yes	将画笔移动(Move to)到点(x,y)
m (relative)			Start a new sub-path at the given (x,y) coordinate.
			M (uppercase) indicates that absolute coordinates will follow;
			m (lowercase) indicates that relative coordinates will follow.
			If a moveto is followed by multiple pairs of coordinates,
			the subsequent pairs are treated as implicit lineto commands.
			Hence, implicit lineto commands will be relative if the moveto is relative,
			and absolute if the moveto is absolute.
			If a relative moveto (m) appears as the first element of the path,
			then it is treated as a pair of absolute coordinates.
			In this case, subsequent pairs of coordinates are treated as relative even though
			the initial moveto is interpreted as an absolute moveto.

Line Commands

Command	Parameters	Repeatable	Explanation
L ( l )	x, y	Yes	从当前点画直线段到点(x,y) Line to
			Draw a line from the current point to the given (x,y) coordinate
			which becomes the new current point.
			L (uppercase) indicates that absolute coordinates will follow;
			l (lowercase) indicates that relative coordinates will follow.
			A number of coordinates pairs may be specified to draw a polyline.
			At the end of the command, the new current point is set to