【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。

SVG Path - 描繪任意圖形

如果想要更彈性的描繪任意線條或圖形,可以進一步使用 path 標籤,這個標籤透過指令與座標資訊,支援任意圖形的描繪作業,包含弧線或是貝茲曲線等等,這是一段典型的 path 標籤配置:

<svg style="background-color:#ecf0fc;" width="600" height="240">
    <path d="M10,10 L300,120" stroke="#0000FF" /> 
</svg>

path 標籤的 d 屬性支援數種不同的指令,用來決定所要描繪的路徑內容,每一個指令會串接一組數字以定義繪圖資訊。

指令 M定義座標位置的兩個數字,例如這裏的 (10,10) ,表示移動至開始描繪的起始位置。
L 指令同樣定義一組座標,例如這裏的 (300,120),表示從前一個指令定義的座標位置描繪一條直線至 (300,120)。

指令與指令之間以空白字元或斷行隔開,例如 M 與 L 之間以空白間隔。



輸出結果中, path 從 M 指令座標點 (10,10) 開始,連結 L 座標點 (300,120),描繪由兩組座標點定義的直線。

並想要描繪圖形只要持續加入需要的指令與座標資訊即可。

<svg style="background-color:#ecf0fc;" width="600" height="240">
    <path d="M50,100 L150,120 L250,20
             L350,200 L450,60 L520,120"
          stroke="#4169e1" fill="none"  />
</svg>

這一段配置,設定了一個以上的 L 指令,描繪由多組座標點組合成的曲線,pah 從 M 開始,依序連接每 L 定義的座標點,形成曲線。
要注意,這裏 fill 屬性設定為 none ,避免因為填色形成封閉圖形.



以下是將 fill 屬性移除的結果。



另外要注意的是,指令定義的座標數字,可以利用逗點或是空白間隔,例如以下的配置:

<path d="M10,10 L300,120" stroke="#0000FF" />
<path d="M10 10 L300 120" stroke="#0000FF" />

這兩行標籤描繪相同的圖形,為了方便閱讀,原則上這裏的討論會適時的以逗點分隔。

在預設的情形下,path 僅是以指定的顏色填滿封閉區域,並不會自動以實線封閉圖形,如果要描繪由實線組成的封閉圖形,可以透過指定 Z 來達到目的。

<svg style="background-color:#ecf0fc;" width="600" height="240">
    <path d="M100,200
         L200,50
         L300,200 " stroke="#000" stroke-width="6" fill="#4169e1" />
</svg>

M 與兩組 L 定義構成三角形所需的三組座標點,輸出結果如下:




在預設的情形下, path 只會以 fill 屬性設定的顏色填滿封閉區域(未指定則是預設的顏色),如果要實作實線的封閉圖形,則需在 d 屬性最後補上 Z 。現在於 path 後方配置 Z ,以下是重新輸出的結果。

<svg style="background-color:#ecf0fc;" width="600" height="240">
    <path d="M100,200
         L200,50
         L300,200 Z" stroke="#000" stroke-width="6" fill="#4169e1" />
</svg>

現在我們得到一個完美的三角形。



Path 指令區分大小寫,如果是大寫,表示採用絕對座標,如果是小寫,則表示採用以目前位置為基準的相對座標。

以下同時配置兩組 path 描繪相同的實線,比較絕對座標與相對座標的設定,為了分辨,兩組 path 設定了不同的線條顏色與寬度。

<svg style="background-color:#ecf0fc;" width="600" height="240">
    <path d="M100,100 L300,100 L300,160"
          stroke="#a0b4f0" stroke-width="20" fill="none" />
    <path d="M100,100 l200,0 l0,60"
          stroke="#4169e1" stroke-width="8" fill="none" />
</svg>

第一組 path 中的 M 與 L 均是大寫,因此採用絕對座標,以 svg 區域的左上角位置 (0,0)為參考原點。

第二組 path 的 L 是小寫,因此以相對於前一組指令的座標點為基準作相對定義,首先 M 移動至 (100,100) ,接下來的 l 視 (100,100) 為原點,然後在水平 X 座標位置右移 200個單位,垂直 Y 座標則不移動,接下來的 l 則視前一組 l 為原點,水平 X 座標位置不移動,垂直 Y 座標則移動 60 個單位。



由於表示的是相同的座標點,因此輸出結果中可以看到兩組重疊的實線,第一組 path以絕對座標定位輸出的是淺藍色粗線,深色細線則是第二組 path 的輸出結果。

以目前為止介紹的簡單圖形,採用任何一種座標影響不大,比較複雜的圖形,例如接下來要討論的弧形曲線,利用相對座標會是比較方便的作法。




沒有留言: