深入理解SVG路径参数及应用
SVG路径（path）是创建复杂矢量图形的强大工具。本文通过一个案例分析，帮助您更透彻地理解SVG路径参数。
案例研究
我们分析以下路径命令：
offset: path("m 100,0 a 100 100 0 1 1 -.1 0 z");
重点在于理解a命令的终点坐标为何是-.1 0而非0 0，以及大小写字母a和z的含义。
路径命令详解
SVG路径命令主要包括：
-
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 rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
-
rx, ry：椭圆半径。 -
x-axis-rotation：椭圆绕x轴旋转角度。 -
large-arc-flag：绘制大弧(1)或小弧(0)。 -
sweep-flag：弧线方向，顺时针(1)或逆时针(0)。 -
dx, dy：相对于当前位置的终点坐标偏移量。
在案例中：
a 100 100 0 1 1 -.1 0
-
100 100：半径为100。 -
0：无旋转。 -
1 1：大弧，顺时针。 -
-.1 0：终点坐标偏移量。
为什么终点坐标是-.1 0？
如果终点是0 0，则会绘制一个完整的圆，而-.1 0的微小偏移，使得绘制的弧几乎是完整的圆，但并非完全闭合，从而避免了起点和终点完全重合。
大小写字母的差异
- 大写字母：绝对坐标，相对于SVG画布原点。
- 小写字母：相对坐标，相对于当前位置。
案例中使用小写字母a和z，表示坐标是相对当前位置的，提高了代码的可读性和灵活性。
通过以上分析，相信您对SVG路径参数有了更深入的理解。 掌握这些知识，您就能更灵活地运用SVG路径创建各种复杂的图形。
