深入理解SVG Path路径参数及应用
SVG（可缩放矢量图形）的path元素是创建复杂矢量图形的关键。熟练掌握其路径参数和命令对于高效绘制和动画至关重要。本文通过一个案例，详细阐述path命令的用法。
案例分析：椭圆弧终点坐标及大小写字母
观察以下SVG path命令片段：
offset: path("M 100,0 a 100 100 0 1 1 -.1 0 z");
其中，a命令绘制椭圆弧，z命令闭合路径。关键问题在于：为什么椭圆弧终点坐标为-.1 0而非0 0？a和z为何使用小写而非大写A和Z？
SVG路径命令详解
SVG path命令使用字母表示不同的绘图指令：
-
M x y：移动画笔到坐标(x, y)。 -
L x y：从当前点绘制直线到(x, y)。 -
H x：水平绘制直线到x坐标。 -
V y：垂直绘制直线到y坐标。 -
Z：闭合路径，连接当前点和起点。 -
C x1 y1, x2 y2, x y或c dx1 dy1, dx2 dy2, dx dy：绘制三次贝塞尔曲线（大写为绝对坐标，小写为相对坐标）。 -
Q x1 y1, x y或q dx1 dy1, dx dy：绘制二次贝塞尔曲线（大写为绝对坐标，小写为相对坐标）。 -
A rx ry x-axis-rotation large-arc-flag sweep-flag x y或a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy：绘制椭圆弧（大写为绝对坐标，小写为相对坐标）。
椭圆弧命令a/A参数解读
a命令参数格式：a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
-
rx,ry：椭圆长轴和短轴半径。 -
x-axis-rotation：椭圆相对于水平轴的旋转角度。 -
large-arc-flag：绘制大弧(1)或小弧(0)。 -
sweep-flag：绘制方向，顺时针(1)或逆时针(0)。 -
dx,dy：相对于当前位置的x, y偏移量。
案例中a 100 100 0 1 1 -.1 0表示：
- 半径均为100。
- 无旋转。
- 绘制大弧，顺时针方向。
- 终点向左偏移0.1个单位。
使用-.1 0而非0 0是为了避免终点与起点重合，从而确保绘制完整的椭圆弧。SVG在起点和终点重合时会忽略后续绘制。
大小写字母的差异
SVG path命令中，大写字母表示绝对坐标，小写字母表示相对坐标。案例中使用小写a和z表示终点坐标和闭合路径都是相对于当前位置的。
通过以上分析，我们理解了案例中-.1 0和a/z小写的意义，这对于精确运用SVG path命令至关重要。
