SVG 入門筆記

緣起

想在網頁中做一個形狀特殊一點的按鈕，圓的方的太單調不符需求，剛好久聞 svg 這個元件，感覺上可以使用這個能夠自由畫出圖案的「向量圖形」來解決我的問題。

Get Start

要在 html 中使用 svg，就必須使用 <svg> 這個 tag，並且在裡面放入要畫的圖形。 由於這次只是做個入門，因此就只會做以下幾種標籤的基礎用法:

1. 線段: <line>
2. 圓形/橢圓形: <ellipse>
3. 矩形: <rect>
4. 文字: <text>
5. 群組: <g>
6. 多邊形: <polygon>
7. 路徑: <path>

首先先在 html 中建立一個寬度跟高度 500px，並有著 5px 粗線黑框的 svg 區塊。
<svg width="500" height="500" style="border: 5px solid #000000;"></svg>

線段(line)

基礎用法:
<line x1="起點 x 座標" y1="起點 y 座標" x2="終點 x 座標" y2="終點 y 座標"></line>

範例(使用了 stroke 來設定筆畫顏色):

<svg width="500" height="500" style="border: 5px solid #000000;">
    <line x1="0" y1="50" x2="500" y2="50" stroke="gray"></line>
</svg>

接著為了後面的練習，我們用 50px 的間隔給這張圖多加上幾條線。

圓形/橢圓形(ellipse)

基礎用法:
<ellipse cx="圓心 x 座標" cy="圓心 y 座標" rx="x 方向半徑" ry="y 方向半徑"></ellipse>

範例(使用了 fill 來設定填滿顏色):
<ellipse cx="50" cy="50" rx="20" ry="20" stroke="blue" fill="#00FFFF"></ellipse>

矩形(rect)

基礎用法:
<rect x="起點 x 座標" y="起點 y 座標" height="高度" width="寬度" fill="blue"></rect>

範例:
<rect x="25" y="125" height="150" width="100" stroke="red" fill="pink"></rect>

文字(text)

基礎用法:
<text x="x 座標" y="y 座標" text-anchor="對齊錨點" alignment-baseline="垂直隊齊方式">文字內容</text>

text-anchor 的可用值: start | middle | end，參考 text-anchor

alignment-baseline 的可用值:
auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | top | center | bottom，參考alignment-baseline

範例(調整了 font-size 的 style 來讓字體大一點):
<text x="100" y="225" text-anchor="middle" alignment-baseline="middle" style="font-size: 24px;">Hello</text>

這邊我們直接把 text 的位置設定在前面的矩形內部，可以發現文字的位置是在矩形之上的(沒有被粉紅色的矩形給蓋過看不見)，為什麼是文字在上呢?讓我們回頭看看程式碼

<rect x="50" y="150" height="150" width="100" stroke="red" fill="pink"></rect> /// 先寫的
<text x="100" y="225" text-anchor="middle" alignment-baseline="middle" style="font-size: 24px;">Hello</text>/// 後寫的

比較晚加上的圖層會蓋過前面的圖層，因為我們先寫了 <rect> 才寫了 <text> 所以文字在上，如果反過來的畫，上下的順序就會相反了喔!

群組(g)

基礎用法:
<g>要被群組起來的內容</g>

範例(使用 transform:rotate()來讓整個群組內的東西一起旋轉):

<g style="transform: rotate(-10deg);">
    <rect x="50" y="150" height="150" width="100" stroke="red" fill="pink"></rect>
    <text x="100" y="225" text-anchor="middle" alignment-baseline="middle" style="font-size: 24px;">Hello</text>
</g>

把剛剛的矩形跟文字群組起來。
要注意的是這裡的 -10deg (逆時鐘轉 10 度) 是整個群組繞著相對參考點(在 svg 中參考點是最左上的點)所轉的度數，而不是自身旋轉的度數。

多邊形(polygon)

基礎用法:
<polygon points="x1,y1 x2,y2 x3,y3 ......"></polygon>

範例(使用 stroke-width 設定筆畫寬度):
<polygon points="100,300 50,450 175,350 25,350 150,450" fill="yellow" stroke="red" stroke-width="3"></polygon>

這邊依序給予 polygon 五個點

1. 100,300
2. 50,450
3. 175,350
4. 25,350
5. 150,450 來繪出這個星型。

路徑(path)

基礎用法:
<path d="做圖參數"></path>

做圖參數有以下幾種(附上不專業翻譯)

• M = moveto (起點位置)
• L = lineto (畫線到)
• H = horizontal lineto (畫水平線到)
• V = vertical lineto (畫垂直線到)
• C = curveto (畫 Bézier 曲線)
• S = smooth curveto (畫反射的 Bézier 曲線)
• Q = quadratic Bézier curve (二次 Bézier 曲線)
• T = smooth quadratic Bézier curveto (反射的二次 Bézier 曲線)
• A = elliptical Arc (畫橢圓弧)
• Z = closepath (畫直線回到起點)

以上的英文字母都可以使用小寫來改寫，大寫為絕對位置，小寫為相對位置。
由於種類過多，這邊的範例就只做部分。

範例 1 :
<path d="M250 50 H350 V25 L400 75 L350 125 v-25 h-100 Z" fill="yellow" stroke="green"></path>

說明:

1. M250 50: 起點 250, 50
2. H350: 畫水平線往右到 x 座標為 350
3. V25: 畫垂直線到 y 座標為 25
4. L400 75: 畫線到座標 400,75
5. L350 125: 畫線到座標 350,125
6. v-25: 注意這邊為小寫的 v ，因此代表相對位置，垂直方向 -25
7. h-100: h 同樣為小寫，水平座標 -100
8. Z: 畫直線回起點

範例 2 :
<path d="M250 200 Q275 100 300 200 T350 200" fill="yellow" stroke="green"/>

說明:

1. M250 200: 起點 250, 200
2. Q275 100 300 200: 如果只是想簡單的調整參數畫出二次 Bézier 曲線，可以這樣記:

• M 的數值: 250, 200 是曲線的起點，
• Q 的倒數兩個數值: 300, 200 是曲線的終點
• Q 的前兩個數值: 275 100 是曲線彎曲方向所指向的點(曲線控制點)。

3. T350 200: 倒映前一個二次 Bézier 曲線使用的曲線控制點，並將終點設為 350, 200

對 Bézier 曲線有興趣的人可以參考二次 Bézier 曲線，圖中的 P1 就是此處所稱的曲線控制點。

範例 3 :
<path d="M400 300 A50 20 0 1 0 350 275 Z" fill="yellow" stroke="green"/>

說明:

1. M400 300: 起點 350,300
2. A50 20 0 1 0 350 275:

• 前兩個數值 50,20: 橢圓弧 x 半徑 50，y 半徑 20
• 第三個數值 0: 與 x 軸旋轉 0 度
• 第四個數值 1: 數值為 1 的話為最大角度弧線，數值為 0 的話為最小角度弧線
• 第五個數值 0: 數值為 1 為順時針，數值為 0 為逆時針。

3. Z: 畫一條線連回起點。

範例 4 : 沒有按鈕的 Switch

<path d="M275 350 A25 25 0 0 0 250 375 V425 A25 25 0 0 0 275 450 Z" fill="#00FFFF"></path>
<path d="M275 350 A25 25 0 0 0 250 375" stroke="black" stroke-width="2" fill="none"></path>
<rect x="275" y="350" height="100" width="150"></rect>
<rect x="290" y="365" height="70" width="120" fill="gray"></rect>
<path d="M425 350 A25 25 0 0 1 450 375 V425 A25 25 0 0 1 425 450 Z" fill="red"></path>
<path d="M425 350 A25 25 0 0 1 450 375" stroke="black" stroke-width="2" fill="none"></path>

小結

以上的介紹應該是足夠繪出簡單的圖型了，如果之後遇到了需要用到 SVG 更高深的技巧，或許會再來寫 part 2 吧。