HTML5學習--SVG全攻略（基礎篇）

明天高級篇

一.什麼是SVG？

SVG 指的是可伸縮矢量圖形 (Scalable Vector Graphics),它用來定義用於網絡的基於矢量的圖形，使用 XML 格式定義圖形。SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失。此外SVG 是萬維網聯盟的標準，SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個總體。 2003 年一月，SVG 1.1 被確立爲 W3C 標準。與其餘圖像格式相比，使用 SVG 的優點有如下幾點：

1.SVG 可被很是多的工具讀取和修改（好比記事本） 2.SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。 3.SVG 是可伸縮的 4.SVG 圖像可在任何的分辨率下被高質量地打印 5.SVG 可在圖像質量不降低的狀況下被放大 6.SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖） 7.SVG 能夠與 Java 技術一塊兒運行 8.SVG 是開放的標準 9.SVG 文件是純粹的 XML

SVG 的主要競爭者是 Flash,與 Flash 相比，SVG 最大的優點是與其餘標準（好比 XSL 和 DOM）相兼容。而 Flash 則是未開源的私有技術。

 

學習過程當中遇到什麼問題或者想獲取學習資源的話，歡迎加入學習交流羣
343599877，咱們一塊兒學前端！

二.SVG 實例

下面的例子是一個簡單的 SVG 文件的例子。SVG 文件必須使用 .svg 後綴來保存：

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="200" cy="100" r="50" stroke="red" stroke-width="2" fill="green"/> </svg>

運行結果

代碼解釋：
第一行包含了 XML 聲明。請注意 standalone 屬性！該屬性規定此 SVG 文件是不是「獨立的」，或含有對外部文件的引用。 standalone="no" 意味着 SVG 文檔會引用一個外部文件 - 在這裏，是 DTD 文件。第二引用了這個外部的 SVG DTD。該 DTD於http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd 該 DTD 位於 W3C，含有全部容許的 SVG 元素。

1.SVG 代碼以 < svg > 元素開始，包括開啓標籤 < svg > 和關閉標籤 < /svg > ，這是根元素。
2.width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。
3.SVG 的 < circle > 用來建立一個圓，cx 和 cy 屬性定義圓中心的 x 和 y 座標。若是忽略這兩個屬性，那麼圓點會被設置爲 (0, 0)。r 屬性定義圓的半徑。
4.stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。咱們把圓的輪廓設置爲 2px 寬，紅色邊框。
5.fill 屬性設置形狀內的顏色。咱們把填充顏色設置爲原諒色。
關閉標籤的做用是關閉 SVG 元素和文檔自己。
注意：全部的開啓標籤必須有關閉標籤！

HTML 頁面中的 SVG
SVG 文件可經過如下標籤嵌入 HTML 文檔：< embed > 、< object > 或者 < iframe >。

三種把 SVG 文件嵌入 HTML 頁面的不一樣方法。

使用 < embed > 標籤

< embed > 標籤被全部主流的瀏覽器支持，並容許使用腳本。

註釋：當在 HTML 頁面中嵌入 SVG 時使用 < embed > 標籤是 Adobe SVG Viewer 推薦的方法！然而，若是須要建立合法的 XHTML，就不能使用 < embed >。任何 HTML 規範中都沒有 < embed > 標籤。
語法：

< src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">

註釋：pluginspage 屬性指向下載插件的 URL。

使用 < object > 標籤

< object > 標籤是 HTML 4 的標準標籤，被全部較新的瀏覽器支持。它的缺點是不容許使用腳本。

註釋：假如您安裝了最新版本的 Adobe SVG Viewer，那麼當使用 < object > 標籤時 SVG 文件沒法工做（至少不能在 IE 中工做）！

語法：

<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />

註釋：codebase 屬性指向下載插件的 URL。

使用 < iframe > 標籤

< iframe > 標籤可工做在大部分的瀏覽器中。

語法：

<iframe src="rect.svg" width="300" height="100"></iframe>

三.SVG 各形狀介紹

（一）SVG 矩形
能根據以前的圓形聯想到，rect元素會在屏幕上繪製一個矩形 。其實只要6個基本屬性就能夠控制它在屏幕上的位置和形狀。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="10" ry="10" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9"/> </svg>

運行結果.png

代碼解釋：

rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
style 屬性用來定義 CSS 屬性
CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
CSS 的 stroke-width 屬性定義矩形邊框的寬度
CSS 的 stroke 屬性定義矩形邊框的顏色
x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的範圍是：0 - 1）
CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的範圍是：0 - 1
CSS 的 opacity 屬性定義整個元素的透明值（合法的範圍是：0 - 1）
rx 和 ry 屬性可以使矩形產生圓角。

（二）SVG 圓形：詳細見上svg實例

（三）SVG橢圓：
ellipse 標籤可用來建立橢圓。橢圓與圓很類似。不一樣之處在於橢圓有不一樣的 x 和 y 半徑，而圓的 x 和 y 半徑是相同的。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="275" cy="125" rx="100" ry="50" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/> </svg>

運行結果.png

代碼解釋：

cx 屬性定義圓點的 x 座標
cy 屬性定義圓點的 y 座標
rx 屬性定義水平半徑
ry 屬性定義垂直半徑

（四）SVG線條
line 標籤用來建立線條

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/> </svg>

運行結果.png

代碼解釋：

x1 屬性在 x 軸定義線條的開始
y1 屬性在 y 軸定義線條的開始
x2 屬性在 x 軸定義線條的結束
y2 屬性在 y 軸定義線條的結束

（五）SVG多邊形
polygon 標籤用來建立含有很多於三個邊的圖形。它們都是由鏈接一組點集的直線構成。polygon的路徑在最後一個點處自動回到第一個點。須要注意的是，矩形也是一種多邊形，若是須要更多靈活性的話，你也能夠用多邊形建立一個矩形。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/> </svg>

運行結果.png

代碼解釋：

points 屬性定義多邊形每一個角的 x 和 y 座標
點集數列。每一個數字用空白符、逗號、終止命令或者換行符分隔開。每一個點必須包含2個數字，一個是x座標，一個是y座標。因此點列表 (0,0), (1,1) 和(2,2)能夠寫成這樣：「0 0, 1 1, 2 2」。路徑繪製完後閉合圖形，因此最終的直線將從位置(2,2)鏈接到位置(0,0)。

（六）SVG 折線
polyline 標籤用來建立僅包含直線的形狀。它是一組鏈接在一塊兒的直線。由於它能夠有不少的點，折線的的全部點位置都放在一個points屬性中：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polyline points="20,100 40,60 70,80 100,20" style="fill:white;stroke:red;stroke-width:2"></polyline> </svg>

運行結果.png

points
點集數列。每一個數字用空白符、逗號、終止命令或者換行符分隔開。每一個點必須包含2個數字，一個是x座標，一個是y座標。因此點列表 (0,0), (1,1) 和(2,2)能夠寫成這樣：「0 0, 1 1, 2 2」。路徑繪製完後閉合圖形，因此最終的直線將從位置(2,2)鏈接到位置(0,0)。

四.SVG 濾鏡簡介

　全部互聯網的SVG濾鏡定義在 < defs > 元素中， < filter > 標籤用來定義SVG濾鏡， < filter > 標籤使用必須的ID屬性來定義向圖形應用到那個濾鏡中。在 SVG 中，可用的濾鏡有：

feBlend SVG 濾鏡。使用不一樣的混合模式把兩個對象合成在一塊兒。
feColorMatrix SVG 濾鏡。應用matrix轉換。 feComponentTransfer SVG 濾鏡。執行數據的 component-wise 重映射。 feComposite SVG 濾鏡。 feConvolveMatrix SVG 濾鏡。 feDiffuseLighting SVG 濾鏡。 feDisplacementMap SVG 濾鏡。 feDistantLight SVG 濾鏡。 Defines a light source feFlood SVG 濾鏡。 feGaussianBlur SVG 濾鏡。對圖像執行高斯模糊。 feImage SVG 濾鏡。 feMerge SVG 濾鏡。建立累積而上的圖像。 feMorphology SVG 濾鏡。 對源圖形執行"fattening" 或者 "thinning"。 feOffset SVG 濾鏡。相對與圖形的當前位置來移動圖像。 fePointLight SVG 濾鏡。 feSpecularLighting SVG 濾鏡。 feSpotLight SVG 濾鏡。 feTile SVG 濾鏡。 feTurbulence SVG 濾鏡。

註釋：您能夠在每一個 SVG 元素上使用多個濾。

（一）SVG 高斯濾鏡
< filter > 標籤必須嵌套在 < defs > 標籤內。< defs > 標籤是 definitions 的縮寫，它容許對諸如濾鏡等特殊元素進行定義。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="Gaussian_Blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> </filter> </defs> <ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/> </svg>

運行結果.png

代碼解釋：

< filter > 標籤的 id 屬性可爲濾鏡定義一個惟一的名稱（同一濾鏡可被文檔中的多個元素使用）
filter:url 屬性用來把元素連接到濾鏡。當連接濾鏡 id 時，必須使用 # 字符
濾鏡效果是經過 < feGaussianBlur > 標籤進行定義的。fe 後綴可用於全部的濾鏡
< feGaussianBlur > 標籤的 stdDeviation 屬性可定義模糊的程度
in="SourceGraphic" 這個部分定義了由整個圖像建立效果。

（二）SVG 陰影效果
feOffset 元素用於建立陰影效果
偏移一個矩形（帶 < feOffset > ），而後混合偏移圖像頂部(含 < feBlend > )
SVG代碼：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feBlend in="SourceGraphic" in2="offOut" mode="normal" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> </svg>

運行結果.png

代碼解釋：
< filter > 標籤的 id 屬性可爲濾鏡定義一個惟一的名稱（同一濾鏡可被文檔中的多個元素使用）
filter:url 屬性用來把元素連接到濾鏡。當連接濾鏡 id 時，必須使用 # 字符

（三）SVG 線性漸變
　漸變是一種從一種顏色到另外一種顏色的平滑過渡。另外，能夠把多個顏色的過渡應用到同一個元素上。

在 SVG 中，有兩種主要的漸變類型：

線性漸變
放射性漸變
< linearGradient > 可用來定義 SVG 的線性漸變。

< linearGradient > 標籤必須嵌套在 < defs > 的內部。< defs > 標籤是 definitions 的縮寫，它可對諸如漸變之類的特殊元素進行定義。

線性漸變可被定義爲水平、垂直或角形的漸變：

當 y1 和 y2 相等，而 x1 和 x2 不一樣時，可建立水平漸變
當 x1 和 x2 相等，而 y1 和 y2 不一樣時，可建立垂直漸變
當 x1 和 x2 不一樣，且 y1 和 y2 不一樣時，可建立角形漸變

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="orange-red" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> </linearGradient> </defs> <ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange-red)"/> </svg>

運行結果.png

代碼解釋：
1.< linearGradient > 標籤的 id 屬性可爲漸變定義一個惟一的名稱。
2.fill:url(#orange-red) 屬性把 ellipse 元素連接到此漸變。
3.< linearGradient > 標籤的 x一、x二、y一、y2 屬性可定義漸變的開始和結束位置。
4.漸變的顏色範圍可由兩種或多種顏色組成。每種顏色經過一個 < stop > 標籤來規定。offset 屬性用來定義漸變的開始和結束位置。

（四）SVG 放射漸變
< radialGradient > 用來定義放射性漸變。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> </radialGradient> </defs> <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/> </svg>

運行結果.png

代碼解釋：
　　< radialGradient > 標籤的 id 屬性可爲漸變定義一個惟一的名稱，fill:url(#grey-blue) 屬性把 ellipse 元素連接到此漸變，cx、cy 和 r 屬性定義外圈，而 fx 和 fy 定義內圈 漸變的顏色範圍可由兩種或多種顏色組成。每種顏色經過一個 < stop > 標籤來規定。offset 屬性用來定義漸變的開始和結束位置。

 

學習過程當中遇到什麼問題或者想獲取學習資源的話，歡迎加入學習交流羣343599877，咱們一塊兒學前端！