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

SVG 直線

直線是最簡單的圖形,直線由兩組座標點構成,x1,y1 表示第一組座標籤,x2,y2 表示第二組座標籤。

(x1,y1) (x2,y2)

支援直線描繪的標籤為 line ,以下配置 line 標籤,描繪一條直線連接 SVG 區域對角的直線。



這條矩形SVG區域的對角線,由以下配置的 line 標籤進行描繪。

<svg style="background-color:#ecf0fc;" width="600" height="260" >
       <line x1="0" y1="0" x2="600" y2="260" stroke="#4169e1" />
</svg>

構成直線所需的兩組座標資訊,x1 與 y1 以及 x2 與 y2,直接以屬性項目於 line 標籤中設定,
當網頁載入這段 svg 配置,便會從 (0,0) 開始描繪一條直線至 (600,260) 。

除了構成直線所需的座標資訊,在利用 svg 標籤描繪圖形時,可以另外指定其它的屬性設定圖形的外觀,例如這組範例標籤中最後的 stroke 屬性,支援構成圖形的線條顏色設定,屬性值是合法的 CSS 顏色值,這裏將其指定為藍色,因此我們得到一條藍色的對角線。

stroke 屬於 svg 標籤的屬性,通常與其它標籤共用,意義相同,除此之外,還有其它更多的共用屬性,例如以下的配置:

<svg style="background-color:#ecf0fc;" width="500" height="300">
    <line x1="20" y1="20" x2="460" y2="260" stroke="#4169e1stroke-width="20" />
</svg>

其中的 line 標籤最後設定的 stroke-width 是發繪的線條寬度,這裏將其設定為 10 ,因此可以得到一條比較粗的直線。



從上述的說明可以看到,屬性值會影響描繪的圖形外觀,而當你瞭解更多的標籤時,會發現某些屬性只適於特定標籤。

瞭解直線,就可以描繪很多圖形了,我們嘗試建立一個簡單的統計圖樣式,配置如下

<svg style="background-color:#ecf0fc;" width="500" height="300">
    <line x1="40" y1="20" x2="40" y2="260" stroke="#4169e1"  />
    <line x1="40" y1="260" x2="460" y2="260" stroke="#4169e1"  /> 

    <line x1="120" y1="120" x2="120" y2="260" stroke="#6687e7"  stroke-width="30" />
    <line x1="220" y1="80" x2="220" y2="260" stroke="#3454b4"  stroke-width="30" />
    <line x1="320" y1="180" x2="320" y2="260" stroke="#a0b4f0"  stroke-width="30" />
    <line x1="420" y1="60" x2="420" y2="260" stroke="#4169e1"  stroke-width="30" /> 
</svg>

最後輸出以下的結果:



這個模擬的簡單圖表,由六個 line 標籤描繪,透過座標定位,並經由調整 stroke 與 stroke-width ,改變線條顏色與粗細來達到模擬的目的,這個範例沒有任何意義,但你可以稍微感受 SVG 的威力,當我們瞭解更多的技巧,透過 JavaScript 整合資料來源,就能夠進一步的描繪真正實用的統計圖表。






沒有留言: