Html5之高級-8 HTML5 SVG(概述、元素)

1、SVG 概述

SVG 概念

    - SVG (Scalable Vector Graphics) 是一種使用XML技術描述二維圖形的語言

    - SVG 可使用三種方式描述二維圖形

        - 矢量圖 (vector graphic shapes),例如直線或曲線構成的路徑

        - 圖片(p_w_picpaths)

        - 文本(text)

SVG 優點

    - SVG 可經過文本編輯器來建立和修改

    - SVG 可被搜索、索引、校本化和壓縮

    - SVG 可在任何的分辨率下被高質量地打印

    - SVG 可在圖像質量不降低的狀況下被放大

SVG 與 Canvas 的區別

    - SVG 

        - 不依賴分辨率

        - 支持事件處理器

        - 最適合帶有大型渲染區域的應用程序(例如百度地圖)

        - 不適合遊戲

    - Canvas

        - 依賴分辨率

        - 不支持事件處理器

        - 可以以".png"或者".jpg"格式保存結果圖像

        - 最合適圖像密集型的遊戲

SVG 示例

    - 繪製一個黑邊藍底的矩形:

      <svg width="100%" height="300">
          <rect x="100" y="100" width="300" height="100" fill="blue" stroke="black" stroke-width="4" />
      </svg>

        - svg  標籤: 用於嵌入 SVG 圖像

        - rect 標籤: 用於描述該圖形是一個矩形

          x 和 y 屬性: 表示該矩形的左上點的座標值

          stroke 屬性: 表示該矩形的邊框顏色

          stroke-width 屬性: 表示該矩形的邊框寬度

SVG 使用方式

    - 單獨的SVG文件形式

        - 使用 XML 文件定義:

        - 指定特殊的命名空間:

        - 定義 SVG 與在 HTML 方式相同

    - 使用 svg 標籤嵌入在 HTML 頁面

    - 使用 embed、object 和 iframe 等標籤嵌入在 HTML 頁面中

    - 內嵌在 XHTML 頁面中

2、SVG 元素

SVG 元素種類

    - SVG 預約義元素

        - 矩形元素

        - 圓形元素

        - 橢圓元素

        - 線條元素

        - 折線元素

        - 多邊形元素

    - SVG 特效元素

        - SVG 濾鏡

        - SVG 漸變

SVG 矩形元素

    - SVG 使用 <rect> 標籤來建立矩形，代碼以下:

        - rect 的 width 和 height 屬性: 定義矩形的寬度和高度

        - style 屬性用來定義 CSS 屬性

        - CSS 的 fill屬性定義矩形的填充顏色 CSS 的stoke-width屬性定義矩形邊框的寬度

        - CSS 的 stroke 屬性定義矩形邊框的顏色

SVG 圓形元素

    - SVG 使用 <circle> 標籤來建立圓型，代碼以下:

        - cx 和 cy 屬性定義圓點的 x 和 y 座標(若是省略cx 和 cy,圓的中心會被設置爲(0,0))

        - r屬性定義圓的半徑

SVG 橢圓元素

    - SVG 使用 <ellipse> 標籤來建立橢圓，代碼以下:

        - cx 屬性定義圓點的 x 座標

        - cy 屬性定義圓點的 y 座標

        - rx 屬性定義水平半徑

        - ry 屬性定義垂直半徑

SVG 線條元素

    - SVG 使用 <line> 標籤來建立橢圓，代碼以下:

        - x1 屬性在 x軸定義線條的開始

        - y1 屬性在 y軸定義線條的開始

        - x2 屬性在 x軸定義線條的結束

        - y2 屬性在 y軸定義線條的結束

SVG 折線元素

    - SVG 使用 <polyline> 標籤來建立橢圓，代碼以下:

        - points 屬性用於存儲折線中的起點、折點和終點的 x 和 y 軸座標值

SVG 多邊形元素

    - SVG 使用 <polygon> 標籤來建立含有很多因而三個邊的多邊形，代碼以下:

        - points 屬性定義多邊形每一個角的 x 和 y 座標

SVG 高斯模糊濾鏡元素

    - SVG  使用 <filter> 標籤來建立濾鏡

    - SVG 使用 <linearGradient> 標籤來建立線性漸變

        - <filter> 標籤 id 屬性可爲濾鏡定義一個惟一的名稱(同一濾鏡可被文檔中的多個元素使用)

        - 濾鏡效果是經過 <feGaussianBlur> 標籤進行定義的

        - <feGaussianBlur> 標籤的stdDeviation 屬性可定義模糊的程度

        - in="SourceGraphic" 這個部分定義了由整個圖像建立效果

    - SVG 使用 <ellipse> 標籤來調用線性漸變:

         - filter:url 屬性來把元素連接到濾鏡。當連接濾鏡 id時，必須使用 # 字符

SVG 漸變元素

    - 漸變的概念

        - 漸變是一種從一種顏色到另外一種顏色的平滑過渡(能夠將多個顏色的過濾應用到同一個元素上)

    - SVG 漸變類型

        - SVG 線性漸變，使用 <linearGradient>標籤訂義線性漸變

        - SVG 放射性漸變，使用 <radialGradient> 標籤訂義放射性漸變

    - SVG 使用 <linearGradient> 標籤來建立線性漸變:

    - SVG 使用 <linearGradient> 標籤來建立線性漸變

        - <linearGradient> 標籤的 id 屬性 可爲漸變定義一個惟一的名稱

        - <linearGradient> 標籤的 x1,x2,y1,y2 屬性可定義漸變的開始和結束位置

        - 漸變的顏色範圍可由兩種或多種顏色組成。每種顏色經過一個<stop>標籤來規定。offset屬性用來定義漸變的開始和結束位置

    - SVG 使用 <ellipse> 標籤來調用線性漸變

        - fill:url(#orange_red) 屬性把 ellipse 元素連接到此漸變

總結：本章內容主要介紹了下 HTML5 SVG(概述、元素)