SVG Path 命令中的橢圓弧終點為什么使用 -.1 0 而不是 0 0？大小寫字母 a 和 z 有什么區別？

深入理解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命令至關重要。