SVG路径参数中的终点坐标为什么是-.1 0，而不是0 0？

深入理解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路径创建各种复杂的图形。