SVG路徑中的參數如何理解和使用？

SVG路徑（path）命令是SVG繪圖的核心，理解其參數至關重要。本文將通過實例講解SVG路徑參數的含義和使用方法。

例：offset: path(“M 100,0 a 100 100 0 1 1 -.1 0 z”);

這段代碼中，M 100,0 將畫筆移動到(100, 0)點。a 命令繪制橢圓弧，參數如下：

• rx, ry: 橢圓的長軸和短軸半徑，此處均為100。
• x-axis-rotation: x軸旋轉角度，此處為0度。
• large-arc-flag: 繪制大弧(1)還是小弧(0)，此處為大弧。
• sweep-flag: 繪制方向，順時針(1)或逆時針(0)，此處為順時針。
• dx, dy: 終點相對于起點的相對坐標，此處為(-0.1, 0)。 注意：a 使用相對坐標，A 使用絕對坐標。 使用 -.1 0 而不是 0 0 是為了避免起點和終點重合，從而繪制出完整的圓形。
• z: 關閉路徑。

小寫字母 (a, m, l 等) 表示相對坐標，大寫字母 (A, M, L 等) 表示絕對坐標。z 或 Z 用于閉合路徑，大小寫無區別。

其他常用路徑命令：

• 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: 繪制橢圓弧 (絕對坐標)。

熟練掌握這些命令及其參數，才能靈活運用SVG進行各種形狀的繪制。