Svg - d属性

路径命令

SVG 的路径命令是对大小写敏感的，大写的路径命令表示绝对坐标，小写的是相对（于当前位置的）坐标

含义	命令
移动到 Moveto	M、m
画线至 Lineto	L、l、H、h、V、v
三次方贝塞尔曲线	C、c、S、s
二次方贝塞尔曲线	Q、q、T、t
椭圆曲线	A、a
封闭路径 ClosePath	Z、z

负值：
负的角度是逆时针的
绝对坐标中，负的 x 和 y 将被解释为负坐标
相对坐标中，负的 x 值为向左移动，负的 y 值为向上移动。

移动到

命令	参数	注释
M	(x, y)	从当前位置移动到坐标 (x, y)。
m	(dx, dy)	x坐标增加dx, y坐标增加dy

画线到

命令	参数	注释
L	(x, y)	从当前位置画线到坐标 (x, y)
l	(dx, dy)	画线，x坐标增加dx, y坐标增加dy
H	x	画线，y坐标不变，x0 = x
h	dx	画线，y坐标不变，x0 += dx
V	y	画线，x坐标不变，y0 = y
v	dy	画线，x坐标不变，y0 += dy

封闭路径

ClosePath 命令将从当前位置绘制一条直线到路径中的第一个点

命令	注释
Z, z	通过连接路径的最后一个点与路径的起始点来闭合当前的子路径如果这两个点的坐标不同，则在两者之间绘制一条直线

椭圆曲线

椭圆曲线命令用于绘制椭圆弧线，这是SVG路径中最复杂的命令

命令	参数	注释
A	$(r x, r y, x - a x i s - r o t a t i o n, l a r g e - a r c - f l a g, s w e e p - f l a g, x, y)$	在当前位置和终点 (x, y) 之间绘制一条椭圆弧线 $r x, r y$ 为椭圆的 x 和 y 半径 $x - a x i s - r o t a t i o n$ 为椭圆 x 轴的旋转角度（度） $l a r g e - a r c - f l a g$ 为 0 或 1，决定绘制大弧还是小弧 $s w e e p - f l a g$ 为 0 或 1，决定绘制顺时针还是逆时针弧线
a	$(r x, r y, x - a x i s - r o t a t i o n, l a r g e - a r c - f l a g, s w e e p - f l a g, d x, d y)$	在当前位置和终点（终点为当前位置沿 x 轴偏移 dx 以及沿 y 轴偏移 dy 处）之间绘制一条椭圆弧线

椭圆曲线参数详解

rx, ry: 椭圆的 x 和 y 半径
x-axis-rotation: 椭圆 x 轴的旋转角度，以度为单位
large-arc-flag:
- 0: 绘制小弧（弧的角度 ≤ 180°）
- 1: 绘制大弧（弧的角度 > 180°）
sweep-flag:
- 0: 逆时针绘制弧线
- 1: 顺时针绘制弧线

使用例子

二次贝塞尔曲线

命令	参数	注释
Q	$(x 1, y 1, x, y)$	在当前位置和终点 (x, y) 之间绘制一条二次贝塞尔曲线 $P n = x, y P c = x 1, y 1$
q	$(d x 1, d y 1, d x, d y)$	在当前位置和终点（终点为当前位置沿 x 轴偏移 dx 以及沿 y 轴偏移 dy 处）之间绘制一条二次贝塞尔曲线 $P n = x o + d x, y o + d y P c = x o + d x 1, y o + d y 1$
T	$(x, y)$	在当前位置和终点 x,y 之间绘制一条平滑的二次贝塞尔曲线 $P n = x, y$
t	$(d x, d y)$	在当前位置和终点（终点为当前位置沿 x 轴偏移 dx 以及沿 y 轴偏移 dy 处）之间绘制一条平滑的二次贝塞尔曲线 $P n = x o + d x, y o + d y$

三次贝塞尔曲线

命令	参数	注释
C	$(x 1, y 1, x 2, y 2, x, y)$	在当前位置和终点 (x, y) 之间绘制一条三次贝塞尔曲线 $ Pn = {x, y} \quad Pcs = {x1, y1} \quad Pce = {x2, y2} $
c	$(d x 1, d y 1, d x 2, d y 2, d x, d y)$	在当前位置和终点（终点为当前位置沿 x 轴偏移 dx 以及沿 y 轴偏移 dy 处）之间绘制一条三次贝塞尔曲线 $P n = x o + d x, y o + d y P c s = x o + d x 1, y o + d y 1 P c e = x o + d x 2, y o + d y 2$
S	$(x 2, y 2, x, y)$	在当前位置和终点 x,y 之间绘制一条平滑的三次贝塞尔曲线
s	$(d x 2, d y 2, d x, d y)$	在当前位置和终点（终点为当前位置沿 x 轴偏移 dx 以及沿 y 轴偏移 dy 处）之间绘制一条平滑的三次贝塞尔曲线