iT邦幫忙

1

SVG - 基礎圖形與樣式

svg

SVG ( Scalable Vector Graphics ) 是 XML 的格式,可以用來繪製向量圖形,相較圖片來說,放大縮小時不會糊掉,適合使用在不需豐富色彩的幾何圖形

新增 SVG 元素

我們需要使用 SVG 時,可直接新增 svg 元素,並設定寬度與高度

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" fill="black" />
</svg>

svg 內的 xmlns="http://www.w3.org/2000/svg" 是命名空間,不寫也是可以的,新增 svg 後便可在內部開始繪製圖形,其繪製方法與 css 有一些不同,以下介紹圖形繪製方法

矩形

<rect x="5" y="5" rx="10" ry="10" width="30" height="30" />
  1. X: 矩形左上角的 X 軸位置
  2. y: 矩形左上角的 Y 軸位置
  3. width: 矩形的寬度
  4. height: 矩形的高度
  5. rx: 矩形圓角的 X 軸半徑
  6. ry: 矩形圓角的 Y 軸半徑

圓形

<circle cx="35" cy="35" r="30" />
  1. r: 圓形的半徑
  2. cx: 圓心的 X 軸位置
  3. cy: 圓形的 Y 軸位置

橢圓形

<ellipse cx="35" cy="35" rx="30" ry="10" />
  1. rx: 橢圓形的 X 軸半徑
  2. ry: 橢圓形的 Y 軸半徑
  3. cx: 橢圓形中心的 X 軸位置
  4. cy: 橢圓形中心的 Y 軸位置

直線

<line x1="10" x2="100" y1="10" y2="100" stroke="black" />
  1. x1: 直線起點的 X 軸位置
  2. y1: 直線起點的 Y 軸位置
  3. x2: 直線終點的 X 軸位置
  4. y2: 直線終點的 Y 軸位置

折線與多邊形

<polyline points="0 0,50 50, 100 0" fill="none" stroke="black" />
<polygon points="0 0,50 50, 100 0" fill="none" stroke="black" />

折線與多邊形皆是由 points 所繪製,每兩個座標為一組,分別代表 XY 座標,以逗號隔開,而兩者的差異在於,多邊形會將最後一點連回至起點,並封閉為一個圖形,而折線不會

路徑繪圖

<path d="M20 30 Q40 5,50 30 T90 30" fill="none" stroke="black" stroke-width="5" />

路徑繪圖可參考MDN,通過組合各種線條,基本上可以繪製出所有的圖形

基礎

  1. M x y: Move to,將畫筆移動至指定點,後面接 x 軸與 y 軸位置
  2. Z: 封閉圖形,將最後一點連回至起點

線條

  1. L x y: Line to,畫一條線至指定點,後面接 x 軸與 y 軸位置
  2. H x: 畫一條水平線,後面接 x 軸位置
  3. V y: 畫一條垂直線,後面接 y 軸位置

貝茲曲線

  1. C x1 y1, x2 y2, x y: 貝茲曲線,由兩個中介點與終點所組成,中間由逗號隔開
  2. S x2 y2, x y: 接在 C 後方,產生與之前相同的曲線,再加上一個中介點與終點組成
  3. Q x1 y1, x y: 二次貝茲曲線,由一個中介點與終點組成
  4. T x y: 接在 Q 後方,產生與之前相同的曲線,後面接終點 x 軸與 y 軸位置

圓弧

A rx ry x-axis-rotation large-arc-flag sweep-flag x y: 這個參數較多,稍微複雜一些

  1. rx: 圓的 x 軸半徑
  2. ry: 圓的 y 軸半徑
  3. x-axis-rotation: 圓旋轉的角度
  4. large-arc-flag: 0 為角度較小的弧線,1 為角度較大的弧線
  5. sweep-flag: 0 為逆時鐘,1 為順時鐘
  6. x: 圓弧結束的 x 軸位置
  7. y: 圓弧結束的 y 軸位置

rxry 小於半徑,則改為以比例方式呈現

填色、邊框與樣式

單純畫出路徑是看不到東西的,我們還要給它顏色與樣式,另外有些屬性可用 css 修改,有些則不行

<rect x="10" y="10" width="100" height="100"
      stroke="blue" fill="purple"
      fill-opacity="0.5" stroke-opacity="0.8"
      stroke-width="5" />
<line x1="40" x2="120" y1="20" y2="20"
      stroke="black" stroke-width="20"
      stroke-linecap="butt" stroke-dasharray="3,5,7" />
  1. fill: 相當於 background-color,可使用的顏色同 css,預設為黑色
  2. fill-opacity: 背景顏色的透明度
  3. stroke: 相當於 border-color,可使用的顏色同 css
  4. stroke-opacity: 邊框線的透明度
  5. stroke-width: 邊框線寬度
  6. stroke-dasharray: 將線條改為虛線,數字帶入線段距離與空白距離,以逗點分隔
  7. stroke-dashoffset: 將線段往左或往右推移
  8. stroke-linecap: 線條端點樣式,有 buttsquareround 共三種
  9. stroke-linejoin: 線條接合樣式,有 miterroundbevel 共三種

圖形部份大概如上,之後就是如何應用了 ~


尚未有邦友留言

立即登入留言