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圖形的填色不使用backgroundborder等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>widthheight<rect>strokefill都寫到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) 文字

文字的中心線

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

我們可以透過dominant-baselinetext-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檔案

  • 確認widthheight有寫在<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>