SVG 與圖形描繪

SVG 系列文章 》

SVG 與 Canvas 是兩個用來描繪圖形最主要的功能,其中SVG透過標籤配置完成圖形定義與呈現,由於SVG是一種向量圖形,因此特別適合需要彈性縮放內容的設計需求。

》座標系統

想要用SVG描繪圖形,必須先配置 svg 標籤,並且於其中配置所要描繪的圖形元素,指定適當的座標與其它相關屬性即可。SVG 的座標系統以左上角為原點(0,0),水平為x軸,垂直為y軸。



》svg 元素與簡單圖形

描繪 SVG 圖形首先必須配置一個svg 標籤。

<svg>
       
</svg>

此 svg 元素的左上角為原點座標 (0,0) ,元素內部為描繪圖形的區塊,指定 width 與 height 屬性以指定其繪圖空間的範圍。接下來於其中配置所要描繪的圖偱元素即可。

直線

直線是最簡單的圖形,定義直線的元素為 line ,以下的配置描繪一條直線。

 <svg>
        <line x1="60" y1="60" x2="460" y2="260"
style="stroke:#ff0000; stroke-width:6px;" />
 </svg>

直線由兩組座標點構成,x1,y1 表示第一組座標籤,x1,y1 表示第二組座標籤,style 設定所要描繪的線條樣式,stroke 表示線條的顏色,stroke-width 表示線條的寬度。這段 svg 配置會從 (60,60) 開始描繪一條直線至 (460,260) 。



矩形

矩形由 rect 元素所定義,以下是描繪矩形所需的元素配置。

<svg>
       <rect x="60" y="60" width="300" height="180"
style="fill:#436B95;stroke:#000;stroke-width:6px;" />
 </svg>

屬性 x,y 為矩形左上角頂點在 svg 範圍區域中的位置,而 width 為矩形的寬度,height 為矩形高度,在 style 中透過 fill 樣式值的設定,可以指定填滿矩形內部的顏色。



圓形與楕圓形

描繪圓形需 circle 元素,以下的配置描繪一個圓形。

<svg>
        <circle cx="300" cy="180" r="120"
                 style="stroke:#000;stroke-width:4;fill:gray;">
        </circle>
</svg>

一個 circle 元素會呈現一個圓形,其中的 cx,cy為圓心坐標值, r 為半徑,style設定效果同前述說明。



如果是楕圓形,則必須利用 ellipse 元素。

<svg>
<ellipse cx="300" cy="180" ry="120" rx="220"
                style="stroke:#000;stroke-width:4;fill:gray;">
</ellipse>
<svg>

每一個 ellipse 標籤會呈現一個楕圓形,其中的 cx,cy為圓點坐標, rx 為水平半徑, ry 為垂直半徑。



SVG 系列文章 》

沒有留言: