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

SVG 矩形

SVG 以三組資料定義矩形:


第一組資料是 x,y 座標,用來表示矩形左上角在SVG描繪區域的位置點,第二組資料則是矩形的寬度 width ,第三組資料則是矩形的高度 height 。

描繪矩形需要使用 rect 標籤,例如以下的配置:

<svg style="background-color:#ecf0fc;" width="600" height="240" >
    <rect x="20" y="20"  width="360" height="160" />
</svg>

這會輸出一個左上角座標點為(20,20)的矩形,這個矩形寬度為 360 ,高度為 160 。



矩形可以進一步設定框線與內部封閉區域的顏色,在沒有設定的情形下,內部以黑色填滿,而且沒有框線,以下的配置可以進一步調整矩形外觀。

<svg style="background-color:#ecf0fc;" width="600" height="240"  >
        <rect x="20" y="20"  width="360" height="160"
                stroke="#6941e1"  stroke-width="12"
                fill="#4169E1"   />
</svg>

stroke 屬性定義矩形的框線顏色(#6941e1-紫),而 stroke-width 則是矩形寬度 12,fill 則是矩形內部顏色(#4169E1-藍)。



這個矩形以指定的藍色填滿其內容區域,並且具有寬度 12 的紫色框線。

我們可以進一步在 rect 標籤中,指定彎曲弧度,以圓弧角呈現描繪矩形。

<svg style="background-color:#ecf0fc;" width="600" height="240"  >
        <rect x="20" y="20"  width="360" height="160"
                stroke="#6941e1"  stroke-width="12"
                fill="#4169E1"
                rx="12" ry="12"  />
</svg>

其中 rx 是x軸的圓弧半徑,ry 則是 y 軸的圓弧半徑,以下是輸出的結果。



矩形在描繪用來表示數量相關的圖表時特別有用,在直線的討論課程中,我們模擬了簡單的統計圖表,現在利用矩形重新實作一次。

<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" />

    <rect x="120" y="120" height="140" width="30" fill="#4169e1" />
    <rect x="220" y="80" height="180" width="30" fill="#e14169" />
    <rect x="320" y="180" height="80" width="30" fill="#69e141" />
    <rect x="420" y="60" height="200" width="30" fill="#6941e1" />
</svg>

前兩個 line 標籤分別描繪 x,y 座標籤,接下來的四個 rect 標籤,分別表示統計圖中的四個量值。



同樣的,這裏僅作矩形的模擬示範,在真正的開發中,並不建議直接利用數值定位來繪製統計圖表,這對於複雜的數據非常困難,在實務應用上,可以透過D3進行描繪,這裏的重點還是在理解進入D3之前必須瞭解的 SVG 基礎。


沒有留言: