SVG Path參數詳解，讓你輕鬆掌握路徑繪製技巧

SVG（Scalable Vector Graphics）是使用XML描述的2D矢量圖形，它可以在不失真的情況下放大或縮小。SVG具有豐富的繪圖元素，其中最基本的是path元素，它可以繪製任意複雜的形狀。了解SVG Path的基本語法和參數是繪製以及處理SVG圖像的必要技能。本文將介紹SVG Path的參數，讓你輕鬆掌握路徑繪製技巧。

一、基本語法

SVG Path的基本語法非常簡單，它由一個或多個繪圖命令組成，命令和參數之間使用空格或逗號分隔。繪製命令可以寫在path元素的d屬性中，如下所示：

<svg width="100" height="100">
  <path d="M 10 10 L 90 90 L 10 90 Z" stroke="black" fill="transparent"/>
</svg>

這段代碼繪製了一個三角形，它由三條線段組成。M命令表示將畫筆移動到指定的坐標點，L命令表示從當前坐標點畫線到指定的坐標點，Z命令表示連接起點和終點形成封閉形狀。在這個例子中，畫筆移動到(10, 10)，然後畫一條直線到(90, 90)，再畫一條直線到(10, 90)，最後通過Z命令將三角形封閉。

下面是一些常用的繪圖命令：

• M x y：將畫筆移動到指定的坐標點
• L 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：橢圓弧形狀

二、命令參數詳解

除了上面介紹的繪圖命令，每個命令還可以帶有不同類型的參數，下面分別介紹它們的含義。

1、坐標點參數

M、L、H、V、T和S命令需要帶有一或多個坐標點參數，每個坐標點參數包含x和y兩個數值，用逗號或空格分隔。坐標點參數可以是絕對坐標，也可以是相對坐標，相對坐標使用小寫字母表示，絕對坐標使用大寫字母表示。

1.1 絕對坐標

絕對坐標是相對於SVG畫布左上角的絕對坐標點，例如：

<path d="M 100 100 L 200 100" />

在這個例子中，M命令的參數是(100, 100)，表示將畫筆移動到畫布上的坐標點(100, 100)，L命令的參數是(200, 100)，表示從當前坐標點畫一條直線到(200, 100)。

1.2 相對坐標

相對坐標是相對於前一個坐標點的相對坐標點，例如：

<path d="M 100 100 l 100 0" />

在這個例子中，M命令的參數是(100, 100)，表示將畫筆移動到畫布上的坐標點(100, 100)，l命令的參數是(100, 0)，表示在當前坐標點的基礎上，向右畫一條長度為100的線段。

2、貝塞爾曲線參數

貝塞爾曲線用於繪製平滑曲線，可以使用C、Q和S命令繪製三次和二次貝塞爾曲線，其中C和Q命令需要三個參數，S命令需要兩個參數。

2.1 三次貝塞爾曲線

三次貝塞爾曲線使用C命令繪製，它需要三個坐標點參數，依次表示控制點1、控制點2和結束點。控制點用於控制曲線的形狀和方向，結束點用於指定曲線的終點坐標。

<path d="M 100 100 C 150 50, 200 50, 250 100" />

這個例子繪製了一個三次貝塞爾曲線，起點坐標是(100, 100)，控制點1坐標是(150, 50)，控制點2坐標是(200, 50)，結束點坐標是(250, 100)。

2.2 二次貝塞爾曲線

二次貝塞爾曲線使用Q命令繪製，它需要兩個坐標點參數，依次表示控制點和結束點。控制點用於控制曲線的形狀和方向，結束點用於指定曲線的終點坐標。

<path d="M 100 100 Q 200 50, 250 100" />

這個例子繪製了一個二次貝塞爾曲線，起點坐標是(100, 100)，控制點坐標是(200, 50)，結束點坐標是(250, 100)。

2.3 簡寫命令

使用S命令可以繪製平滑的貝塞爾曲線，它需要兩個坐標點參數，依次表示控制點和結束點。S命令與前面的命令有所不同的是，它沒有指定第一個控制點，而是通過前面一個曲線的結束點作為第一個控制點。

<path d="M 100 100 C 150 50, 200 50, 250 100 S 300 150, 350 100" />

這個例子中，前面繪製了一個三次貝塞爾曲線，結束點是(250, 100)，這個曲線的結束點也是下一個S命令的第一個控制點。這個例子相當於繪製兩個三次貝塞爾曲線。

3、橢圓弧參數

使用A命令可以繪製橢圓弧線，它共需要七個參數，依次表示橢圓寬度rx、橢圓高度ry、x軸旋轉角度x-axis-rotation、弧線標記large-arc-flag、sweep-flag、結束點坐標。其中前五個參數都是數值，large-arc-flag和sweep-flag都是布爾類型。

3.1 橢圓弧參數解析

橢圓弧參數比較難以理解，下面詳細解釋每個參數的含義。

• rx：橢圓寬度的一半
• ry：橢圓高度的一半
• x-axis-rotation：繞x軸旋轉的角度，單位是度
• large-arc-flag：表示是否畫大弧線，0表示小角度的弧線，1表示大角度的弧線
• sweep-flag：表示是順時針方向還是逆時針方向，0表示逆時針方向，1表示順時針方向
• x y：結束點的坐標

3.2 橢圓弧繪製

使用A命令繪製橢圓弧線需要指定起點和結束點，因此可以先使用M和L命令繪製一條直線，再用A命令繪製橢圓弧線。

<path d="M 100 50 L 200 50 A 50 30 0 0 1 200 150" />

這個例子繪製了一個橢圓弧，起點坐標是(100, 50)，終點坐標是(200, 150)，rx=50，ry=30，x-axis-rotation=0，large-arc-flag=0，sweep-flag=1。

三、小結

SVG Path是繪製和處理SVG圖像的基礎，了解Path的語法和參數可以幫助你更好地掌握SVG的繪圖技巧。本文介紹了Path的基本語法和常用命令，以及各個命令的參數類型和細節，希望可以對你有所幫助。