SVG

viewbox

viewbox="右上角的X座標 右上角的Y座標 寬度 高度"

右上角的X座標，建議設定為0
右上角的Y座標，建議設定為0
這樣，svg圖形的中心點會為(寬度/2, 高度/2)

圓形

circle(cx=圓心X座標 cy=圓心Y座標 r=半徑)

svg(viewbox="0 0 100 100" width="300" height="300")
 circle(cx=50 cy=50 r=10)

svg
 border: 1px solid #000

方形

rect(右上角X座標 右上角Y座標 寬度 高度)

svg(viewbox="0 0 100 100" width="300" height="300")
 rect(x=40 y=40 width=20 height=20)

stroke與fill：框線與填色

svg圖形的填色不使用background、border等CSS屬性
他要使用專門的定義顏色的系統

svg(viewbox="0 0 100 100" width="300" height="300")
 rect(x=40 y=40 width=20 height=20 stroke="skyblue" fill="aliceblue")

這些指定樣式的屬性也可以寫到CSS裡面

svg(viewbox="0 0 100 100")
 rect(x=40 y=40 width=20 height=20)

svg
 border: 1px solid #000
 width: 300px
 height: 300px
 rect
  stroke: skyblue
  fill: aliceblue

上圖將<svg>的width與height、<rect>的stroke與fill都寫到CSS裡了

直線

line(x1=起始點X座標 y1=起始點Y座標 x2=終結點X座標 y2=終結點Y座標 stroke=線條顏色) 

stroke不是必備屬性，只是不指定的話就看不到線條了

svg(viewbox="0 0 100 100" width="300" height="300")
 line(x1=30 y1=50 x2=70 y2=50 stroke="black")

文字

text(x=起始X座標 y=起始Y座標) ★★文字內容★★

svg(viewbox="0 0 100 100" width="300" height="300")
 text(x=50 y=50) 文字

文字的中心線

仔細看上圖，雖然x與y都設定了中心點的值，但是描繪出來的文字看起來還是偏一邊
這是因為，<text>的中心線預設位在右下方，所以他是以右下方等於(x, y)為基準來描繪文字

我們可以透過dominant-baseline與text-anchor來重新定義<text>的垂直/水平中心線

svg(viewbox="0 0 100 100" width="300" height="300")
 text(x=50 y=50) 文字

svg
 border: 1px solid #000
 text
  dominant-baseline: middle
  text-anchor: middle

存成svg檔案

• 確認width、height有寫在<svg>裡面
• <svg>加上xmlns="http://www.w3.org/2000/svg"，指定xml檔案類型為svg

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewbox="0 0 100 100">
    <circle cx="50" cy="50" r="10"></circle>
</svg>