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


沒有留言: