SVG path 标签简介

原创

已于 2024-03-15 13:24:47 修改 · 3.6k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2018-07-23 22:06:57 首次发布

SVG path 标签用于定义形状的轮廓，可以填充、描边或作为剪切路径。d 属性包含了路径数据，包括 M 移动到、Line 命令、Bezier 曲线和椭圆弧曲线等，提供了丰富的绘图能力。

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 = “path data”. The definition of the outline of a shape.

Pen Command

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 n