【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 4 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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 系列文章 》


沒有留言: