SVG 知識點

  • SVG 是向量圖形格式，可以建立二維圖形、動畫與互動
  • 基於XML文字檔格式，產生 DOM 樹 (不同於 canvas 是平面畫布)
  • SVG 建立的圖形元素 (形狀、文字、線條)， 可用外觀屬性控制
  • SVG 圖形原則上是無限大，width / height 只是定義 viewport 視窗大小
  • 圖形原點是左上角，由上而下、從左至右
  • SVG 可定義結構化元素(< g >)，組合其他子元素成為複合單位
  • SVG 可以接收使用者事件，並回應事件進行互動

SVG 形狀

  1. < rect > 長方形：X、Y 調整左上座標點位置

  2. < rect > 長方形：rx、rx 調整水平/垂直邊角半徑

  3. < circle > 圓形：cx, cy 水平/垂直中心座標、r 半徑

  4. < ellipse > 橢圓形：cx, cy 水平/垂直中心座標、rx, ry 水平/垂直半徑

SVG 線條

  1. < line > 線條：x1 / y1 座標開始點、x2 / y2 座標結束點

  2. < polyline > 折線：points 來表示每個點之間的 X、Y 座標

  3. < polygon > 多邊形：數值與折線相同，只是 polygon 會產生閉合折線並填滿區塊

SVG 路徑與文字

  1. < path > 路徑：只有d參數，

    透過命令語言（海龜繪圖形式）繪製任意形狀

    因為SVG是向量圖，所有的物件和元素其實都是由 Path (路徑) 所組成

    path 只有一個特定元素< d >，是由空白間隔的指令＋座標組合


  2. < text > 文字：顏色用fill

    SVG 真有趣!

  3. text on Path 路徑文字

    鐵人快要寫不完啦～～崩潰！！

SVG 屬性

  1. 表現屬性：常用的有 stroke、stroke-width、fill、font-size、opacity、visibility
  2. 移動屬性：常用的有 rotate、transform

SVG 結構元素

  1. 常用的有 < svg >、< g >、< defs >、< use >
  2. 沒有形狀，負責組裝複雜圖形物件為一共同集合，並可一次移動與操作這個圖形集合
  3. 套用到結構元素上的轉換（移動、換色）會同步套用到子項目