【公告】網站目前停止所有的課程訂閱服務,除了 7 月底預計完成上線的 KBF 餘下課程影片,將不會再新增其它課程內容,原有學員權益不受影響,造成不便還請見諒,我們正在開發以 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供更好的課程訂閱服務,感謝學員的支持。

SVG 描繪不規則路徑

SVG 系列文章 》




不規則線條描繪,可以透過 path 元素處理。

<path d="M50,150
              L150,220
              L350,120
              L450,220
              L550,320
              L620,220"
              style="stroke:#808080; fill:none;stroke-width:4;" />

path 元素的d屬性提供了數種不同的指令,用來決定所要描繪的路徑內容。指令 M 表示移動到指定的座標點 50,150 ,接下來的 L指令表示描繪一條直線到此座標點,最後path從 M 指令座標點 50,150 開始依序連結所有的座標點構成所要呈現的圖形,屬性 d 中的指令必須以x,y 座標為一組,並以空白字元或斷行隔開。


path 中的style 屬性的樣式意義同前述說明,不過要特別注意fill 樣式,如果沒有設定為none ,在某些可能造成封閉圖形的情形下,則預設會以黑色填滿路徑空白區域,例如以下的 path 元素設計:

<path d="M50,150
              L150,220
              L350,120"
              style="stroke:#808080; #00ffff;stroke-width:4;" />

指定 fill 屬性值,則會得到以下的輸出結果。



SVG 系列文章 》


沒有留言: