XML 學習詳解

習思路

1.什么是XML

Extendisble mark language 【可擴展的標記語言】

? 標記語言

HTML,XHTML,HTML5,XML

你們知不知道他們之間有什么關系嗎？

? 可擴展

在HTML中寫一個表格我們使用

預定義標簽，含義已經被定義好了。

標簽可以自定義，

? 特點

XML 指可擴展標記語言，是獨立于軟件和硬件的信息傳輸工具。

XML 是一種標記語言，很類似 HTML。

XML 的設計宗旨是傳輸數據，而非顯示數據

XML 標簽沒有被預定義。您需要自行定義標簽。

XML 被設計為具有自我描述性。

XML 是 W3C 的推薦標準。

2.Xml的作用

總共分為兩大部分：

? 數據儲存

配置文件儲存數據：

在一些軟件：QQ，飛秋，都有配置文件的，固定參數數據儲存，在一些C/S模式的軟件中應用的非常多，在編程語言中,java ,net ,C#

臨時表的數據儲存：

在實際的項目中，一些固定不變得數據和數據量比較少的數據我們會使用xml 來進行儲存。例如：地理信息數據

? 數據交換

AJAX 角度

進行固定格式的數據交換

Webservice 網絡服務

例如：查詢天氣，航班信息查詢

二、XML結構

? 代碼舉例：

? 結構分析：

? 總結特點

1.必須要有根元素，有且只能有一個。

2.Xml的元素類型有三種：

元素節點

文本節點：

標簽中含有文本內容

屬性節點：

在節點中有屬性存在，我們就說這個節點是一個屬性節點

三、XML語法

1.語法總則

必須以XML聲明開頭

它必須擁有唯一的根元素

開始標簽必須與結束標簽相匹配

元素對大小寫敏感

所有的元素都必須關閉

所有元素都必須正確嵌套

必須對特殊字符使用實體

2.文檔聲明

聲明一個xml文件

<?xml version=”1.0” encoding=”utf-8” ?>
語法規則： 必須 <?xml ?>
說明 version : xml的版本，通用版本1.0
     Encoding: 字符編碼格式

運行上述代碼，結果如下：

注意：字符編碼格式統一，xml 編碼的聲明，必須要和文件的格式保持一致

3.命名規則【標簽元素】

為什么要有這個命名規則呢？

因為我們XML 它是一個可擴展的標記語言，標簽自己定義

名稱可以是字母、數字以及其他的字符

名稱不能以數字或者標點符號開始

名稱不能以字符“xml”(或者Xml、XML)開始

名稱不能包含空格

可以使用任何名稱，沒有保留的字詞

插腳一腳：

4.定義元素【標簽】

? Xml三種節點

元素節點

文本節點

屬性節點

? 元素的三種表現形式：

元素包含元素：

元素包含文本節點：

元素包含屬性：

? 實例

5.定義屬性

? 描述

屬性他就是用來描述一些事物元素的【附加描述信息】

屬性必須依附于元素來實現

? 作用

描述信息的定義

描述信息可以在屬性和標簽之間進行切換

? 注意使用事項

1.屬性必須依附于元素來實現

2.必須定義在開始標簽

6.實體引用【CDATA區】

對比人物大小如下圖：

? 描述

在標簽內部寫字符串文本的時候，會有一些特殊的字符例如：< > 空格，等。我想需要在文本中展示出來，這個時候我們不能直接寫在里面，要使用實體引用

? 實體引用

在HTML中的實體引用，

空格：

在XML中使用實體引用

如果特殊符號特別多，這個時候怎么辦？

? 多個實體引用

語法：<![CDATA[data]]>

Data: 數據

使用CDATA 區如下

7.注釋

在HTML中使用注釋

<!--  注釋內容 -->

在XML中同樣使用

注意：注釋不能寫在聲明的開始

8.批處理指令【了解】

處理指令（PIs）允許文檔包含用于應用程序的指令

處理指令很少被使用。主要用于鏈接 XML 文檔到樣式表【xml-stylesheet】

引入方法：

定義樣式文件

Books.css

代碼：

color:red;

}

XML 實現

課堂練習：

編寫xml文檔，將如下所示user數據用XML的方式來保存

四、PHP解析XML

1.什么是XML的解析

其實就是將xml結構中儲存的數據給提取出來，這個提取的過程我們把他叫做解析，解析出來的內容就是，文本節點包含的內容還有屬性

2.PHP解析XML方式

手冊位置：

在PHP中解析XML文檔，有十幾種操作，但是我們主要關注 DML操作和SimpleXML

DOM: 是XML解析通用方法，不僅適用于PHP ，也使用其他語言【操作方法和函數是一樣】

SimpleXML: 是PHP語言所特有的處理方法，將一些復雜DOM操作，進行了方法的封裝，可以簡單實現XML的操作

3.創建一個XML文件

? 創建步驟

1.聲明文檔格式

2.定義元素

3.元素結構化

? 最終代碼

<?xml version="1.0" encoding="utf-8" ?>
<words>
	<word>
		<name>no zuo no die</name>
		<fayin>no zuo no die</fayin>
		<fanyi>不作死就不會死</fanyi>
	</word>
	<word>
		<name>hello </name>
		<fayin>hello</fayin>
		<fanyi>你好</fanyi>
	</word>

</words>

想操作XML必須確保xml沒有任何語法錯誤！

4.DOM操作方式【了解】

? 實現原理

整個轉換操作是在計算機內存中實現的。

? 實現思路

1.讀取文檔

2.獲取文檔內容

3.將文檔的內容展示出來

? 使用語法

操作類DOMDocument

$dom=new DOMDocument(version,encoding);

說明：version 我們定義XML 是的版本，

Encoding 定義時候的編碼格式

實現代碼：

//讀取創建的單詞的xml 文檔
//實例化操作對象DOM
$dom=new DOMDocument('1.0', 'utf-8');
//加載words.xml 文

? 操作方法

語法：對象模型->load(url);

說明：url 可以是據對路徑也可以是相對路徑

作用：加載要操作的xml文件

對象加載文件之前和文件之后區別：

? 讀取節點

語法：當前對象->getElementsByTagName(‘標簽名’);

作用：選中指定所有的標簽

獲取了所有的節點：

//加載words.xml 文件
$dom->load('words.xml');
$names=$dom->getElementsByTagName('name');
var_dump($names->item(1));exit;

從節點中獲取文本內容

語法：選中的節點-> Item(0);

作用：選中具體的操作節點

//加載words.xml 文件
$dom->load('words.xml');
$names=$dom->getElementsByTagName('name');
var_dump($names->item(1));exit;

? 讀取節點屬性

當前節點對象->getAttribute(‘屬性名稱’);

? 增加節點

? 刪除節點

5.SimpleXML方式【重點】

? 實現原理

? 使用語法

使用函數

Simplexml_load_file(path)；

說明：path 就是要加載的文件的路徑【相對路徑也可以是絕對路徑】

作用：1.加載xml文件

2.實例化操作類【SimpleXmlElement】

Simplexml_load_string(str);

說明：str 就是一個xml格式的字符串

作用：將一個xml格式的字符串，轉換成就可以操作的對象

File_get_contents(path);

讀取節點

$dom=simplexml_load_file('words.xml');
//循環讀取
foreach ($dom->word as $key=> $value) {
echo $value->name;
}
Simplexml_load_string()

讀取節點屬性

語法：當前節點對象->attributes()

作用：獲取當前節點的屬性的值

創建節點

語法：操作對象->addChild(節點名稱，節點內容)

語法：操作對象-asXML(‘保存的文件以及路徑’);

$str=file_get_contents('words.xml');
// var_dump($str);exit;
$dom=simplexml_load_string($str);
//增加word節點
$word=$dom->addChild('word');
//增加name
$word->addChild('name', 'xiaoming');
//fanyi
$word->addChild('fayin', '小明');
//翻譯
$word->addChild('fanyi', '小明');
//將追加的內容寫入文件即可
$dom->asXML('words.xml');

? 刪除節點

在PHP數組中我想刪除某個值，使用unset($arr[1])

也是使用unset() , 但是不是unset 數組，而是對象的屬性名稱

? 修改操作自己完成

6.DOM和SimpleXML對比

? 實現原理對比

DOM 他是將XML文檔轉換成可以操作的模型【在內存中存在】，這個時候在使用DOM封裝的操作對象來對這個模型進行CURD操作。

SimpleXML 它是將XML文檔直接轉換成對象來直接進行CURD操作

? 代碼對比

六、XPATH

1.什么是XPATH

XPath是一門在 XML 文檔中查找信息的語言，XPath可用來在 XML 文檔中對元素和屬性進行遍歷。

而且Xpath并不僅僅應用于XML數據查詢，其在很多語言中（PHP、Java、.NET以及Javascript），都可以廣泛使用。

參考文獻： @link http://www.w3school.com.cn/xpath/xpath_syntax.asp

使用Xpath定義路徑表達式可以按需查找節點并返回集合形式。

2.查找規則

? 【/】設置絕對路徑

語法：操作對象->xpath(‘/節點名’);

作用：選取從根節點開始查找

? 【//】全局查找

語法規則:操作對象->xpath(‘/節點//節點名稱’);

作用：查找節點，不管節點在什么層次下都返回節點的內容

使用例子：

? 【..】選取父節點

語法：操作對象->xpath(‘/節點1/節點2/節點3/..’);

作用：

? 【[]】過濾節點

語法規則：操作對象-xpath(‘/節點[節點名稱=節點里面的內容]’);

作用：根據節點內容來查找節點

? 【@】過濾屬性

語法：操作對象-xpath(‘/節點[@屬性=屬性的值]’);

作用：

3.XPATH在線詞典應用

1.完成需求

提供一個input 框當用戶輸入要查找的單詞的時候返回這個單詞的所有翻譯結果。

2.完成步驟

1.使用函數來加載單詞xml文件

2.獲取用戶傳遞的參數

3.使用xpath進行數據的檢索

4.將結果返回并且展示到頁面中

因為檢索出來的內容是多個，所以返回格式是：數組包含對象

要想trans 里面的內容向，word 一樣可以使用【對象->word】這種形式來輸出

可以將CDATA進行轉碼

3.完成代碼

”XMLHttpRequest 的異步調用網上找的例子運行沒問題，但稍微改了一點點就報錯”InvalidStateError: XMLHttpRequest has an invalid context“。斷斷續續搞了3天終于通了，可以接收二進制文件了。 “ 之后找到了下篇文章，發現我所使用的方法是下方中的老方法。準備再按下文所說新方法試試。

下文是2011寫的了，想必所說內容到現在已是所有瀏覽器都支持的了吧。

以下轉自： https://www.html5rocks.com/zh/tutorials/file/xhr2/。

XMLHttpRequest2 新技巧

HTML5 Rocks

HTML5 世界中有這樣一位無名英雄：XMLHttpRequest。嚴格地說，XHR2 并不屬于 HTML5。不過，它是瀏覽器供應商對于核心平臺不斷做出的改進中的一部分。我之所以將 XHR2 加入我們新的百寶囊中，就是因為它在如今復雜的網絡應用中扮演了不可或缺的角色。

結果呢，我們這位老朋友來了個大變身，很多人都不知道它的新功能了。2 級 XMLHttpRequest 引入了大量的新功能（例如跨源請求、上傳進度事件以及對上傳/下載二進制數據的支持等），一舉封殺了我們網絡應用中的瘋狂黑客。這使得 AJAX 可以與很多尖端的 HTML5 API 結合使用，例如 File System API、Web Audio API 和 WebGL。

此教程重點介紹 XMLHttpRequest 中的新功能，尤其是可用于處理文件的功能。

抓取數據

以前通過 XHR 抓取二進制 blob 形式的文件是很痛苦的事情。從技術上來說，這甚至是不可能的實現。有一種廣為流傳的一種技巧，是將 MIME 類型替換為由用戶定義的字符集，如下所示：

提取圖片的舊方法：

var xhr=new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
// Hack to pass bytes through unprocessed.
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.onreadystatechange=function(e) {
 if (this.readyState==4 && this.status==200) {
 var binStr=this.responseText;
 for (var i=0, len=binStr.length; i < len; ++i) {
 var c=binStr.charCodeAt(i);
 //String.fromCharCode(c & 0xff);
 var byte=c & 0xff; // byte at offset i
 }
 }
};
xhr.send();

雖然這種方法可行，但是 responseText 中實際返回的并不是二進制 blob，而是代表圖片文件的二進制字符串。我們要巧妙地讓服務器在不作處理的情況下，將這些數據傳遞回去。雖然這個技巧有用，但是我不推薦大家走這種歪門邪道。只要是通過玩弄字符代碼和字符串操控技巧，強行將數據轉化成所需的格式，都會出現問題。

指定響應格式

在前一個示例中，我們通過替換服務器的 MIME 類型并將響應文本作為二進制字符串處理，下載了二進制“文件”形式的圖片。現在，讓我們利用 XMLHttpRequest 新增的 responseType 和 response 屬性，告知瀏覽器我們希望返回什么格式的數據。

xhr.responseType

在發送請求前，根據您的數據需要，將 xhr.responseType 設置為“text”、“arraybuffer”、“blob”或“document”。請注意，設置（或忽略）xhr.responseType='' 會默認將響應設為“text”。

xhr.response

成功發送請求后，xhr 的響應屬性會包含 DOMString、ArrayBuffer、Blob 或 Document 形式（具體取決于 responseTyp 的設置）的請求數據。

憑借這個優秀的新屬性，我們可以修改上一個示例：以 ArrayBuffer 而非字符串的形式抓取圖片。將緩沖區移交給 BlobBuilder API 可創建 Blob：

BlobBuilder=window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
var xhr=new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType='arraybuffer';
xhr.onload=function(e) {
 if (this.status==200) {
 var bb=new BlobBuilder();
 bb.append(this.response); // Note: not xhr.responseText
 var blob=bb.getBlob('image/png');
 ...
 }
};
xhr.send();

好多了！

ArrayBuffer 響應

ArrayBuffer 是二進制數據通用的固定長度容器。如果您需要原始數據的通用緩沖區，ArrayBuffer 就非常好用，但是它真正強大的功能是讓您使用 JavaScript 類型數組創建底層數據的“視圖”。實際上，可以通過單個 ArrayBuffer 來源創建多個視圖。例如，您可以創建一個 8 位整數數組，與來自相同數據的現有 32 位整數數組共享同一個 ArrayBuffer。底層數據保持不變，我們只是創建其不同的表示方法。

例如，下面以 ArrayBuffer 的形式抓取我們相同的圖片，但是現在，會通過該數據緩沖區創建無符號的 8 位整數數組。

var xhr=new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType='arraybuffer';
xhr.onload=function(e) {
 var uInt8Array=new Uint8Array(this.response); // this.response==uInt8Array.buffer
 // var byte3=uInt8Array[4]; // byte at offset 4
 ...
};
xhr.send();

Blob 響應

如果您要直接處理 Blob 且/或不需要操作任何文件的字節，可使用 xhr.responseType='blob'：

window.URL=window.URL || window.webkitURL; // Take care of vendor prefixes.
var xhr=new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType='blob';
xhr.onload=function(e) {
 if (this.status==200) {
 var blob=this.response;
 var img=document.createElement('img');
 img.onload=function(e) {
 window.URL.revokeObjectURL(img.src); // Clean up after yourself.
 };
 img.src=window.URL.createObjectURL(blob);
 document.body.appendChild(img);
 ...
 }
};
xhr.send();

Blob 可用于很多場合，包括保存到 indexedDB、寫入 HTML5 文件系統或創建 Blob 網址（如本例中所示）。

發送數據

能夠下載各種格式的數據固然是件好事，但是如果不能將這些豐富格式的數據送回本壘（服務器），那就毫無意義了。XMLHttpRequest 有時候會限制我們發送 DOMString 或 Document (XML) 數據。但是現在不會了。現已替換成經過修改的 send() 方法，可接受以下任何類型：DOMString、Document、FormData、Blob、File、ArrayBuffer。本部分的其余內容中的示例演示了如何使用各類型發送數據。

發送字符串數據：xhr.send(DOMString)

function sendText(txt) {
 var xhr=new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload=function(e) {
 if (this.status==200) {
 console.log(this.responseText);
 }
 };
 xhr.send(txt);
}
sendText('test string');
function sendTextNew(txt) {
 var xhr=new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.responseType='text';
 xhr.onload=function(e) {
 if (this.status==200) {
 console.log(this.response);
 }
 };
 xhr.send(txt);
}
sendText2('test string');

這沒有新內容，只是正確的代碼段略有不同。其中設置了 responseType='text' 作為對比。再次說明，省略此行會得到同樣的結果。

提交表單：xhr.send(FormData)

很多人可能習慣于使用 jQuery 插件或其他庫來處理 AJAX 表單提交。而我們可以改用 FormData，這是另一種針對 XHR2 設計的新數據類型。使用 FormData 能夠很方便地實時以 JavaScript 創建 HTML <form>。然后可以使用 AJAX 提交該表單：

function sendForm() {
 var formData=new FormData();
 formData.append('username', 'johndoe');
 formData.append('id', 123456);
 var xhr=new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload=function(e) { ... };
 xhr.send(formData);
}

實質上，我們只是動態創建了 <form>，并通過調用 append 方法為其附加了 <input> 值。

當然，您無需從一開始就創建 <form>。FormData 對象可通過頁面上現有的 HTMLFormElement 進行初始化。例如：

<form id="myform" name="myform" action="/server">
 <input type="text" name="username" value="johndoe">
 <input type="number" name="id" value="123456">
 <input type="submit" onclick="return sendForm(this.form);">
</form>
function sendForm(form) {
 var formData=new FormData(form);
 formData.append('secret_token', '1234567890'); // Append extra data before send.
 var xhr=new XMLHttpRequest();
 xhr.open('POST', form.action, true);
 xhr.onload=function(e) { ... };
 xhr.send(formData);
 return false; // Prevent page from submitting.
}

HTML 表單可包含文件上傳（例如 <input type="file">），而 FormData 也可以處理此操作。只需附加文件，瀏覽器就會在調用 send() 時構建 multipart/form-data 請求。

function uploadFiles(url, files) {
 var formData=new FormData();
 for (var i=0, file; file=files[i]; ++i) {
 formData.append(file.name, file);
 }
 var xhr=new XMLHttpRequest();
 xhr.open('POST', url, true);
 xhr.onload=function(e) { ... };
 xhr.send(formData); // multipart/form-data
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
 uploadFiles('/server', this.files);
}, false);

上傳文件或 blob：xhr.send(Blob)

我們也可以使用 XHR 發送 File 或 Blob。請注意，所有 File 都是 Blob，所以在此使用兩者皆可。

該示例使用 BlobBuilder API 從頭開始創建新的文本文件，并將該 Blob 上傳到服務器。該代碼還設置了一個處理程序，用于通知用戶上傳進度：

<progress min="0" max="100" value="0">0% complete</progress>
function upload(blobOrFile) {
 var xhr=new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload=function(e) { ... };
 // Listen to the upload progress.
 var progressBar=document.querySelector('progress');
 xhr.upload.onprogress=function(e) {
 if (e.lengthComputable) {
 progressBar.value=(e.loaded / e.total) * 100;
 progressBar.textContent=progressBar.value; // Fallback for unsupported browsers.
 }
 };
 xhr.send(blobOrFile);
}
// Take care of vendor prefixes.
BlobBuilder=window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
var bb=new BlobBuilder();
bb.append('hello world');
upload(bb.getBlob('text/plain'));

上傳字節：xhr.send(ArrayBuffer)

最后也是相當重要的一點就是，我們能以 XHR 的有效負載形式發送 ArrayBuffer。

function sendArrayBuffer() {
 var xhr=new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload=function(e) { ... };
 var uInt8Array=new Uint8Array([1, 2, 3]);
 xhr.send(uInt8Array.buffer);
}

跨源資源共享 (CORS)

CORS 允許一個域上的網絡應用向另一個域提交跨域 AJAX 請求。啟用此功能非常簡單，只需由服務器發送一個響應標頭即可。

啟用 CORS 請求

假設您的應用已經在 example.com 上了，而您想要從 www.example2.com 提取數據。一般情況下，如果您嘗試進行這種類型的 AJAX 調用，請求將會失敗，而瀏覽器將會出現“源不匹配”的錯誤。利用 CORS，www.example2.com 只需添加一個標頭，就可以允許來自 example.com 的請求：

Access-Control-Allow-Origin: http://example.com

可將 Access-Control-Allow-Origin 添加到某網站下或整個域中的單個資源。要允許任何域向您提交請求，請設置如下：

Access-Control-Allow-Origin: *

其實，該網站 (html5rocks.com) 已在其所有網頁上均啟用了 CORS。啟用開發人員工具后，您就會在我們的響應中看到 Access-Control-Allow-Origin 了：

html5rocks.com 上的 Access-Control-Allow-Origin 標頭

啟用跨源請求是非常簡單的，因此如果您的數據是公開的，請務必啟用 CORS！

提交跨域請求

如果服務器端已啟用了 CORS，那么提交跨域請求就和普通的 XMLHttpRequest 請求沒什么區別。例如，現在 example.com 可以向 www.example2.com 提交請求了：

var xhr=new XMLHttpRequest();
xhr.open('GET', 'http://www.example2.com/hello.json');
xhr.onload=function(e) {
 var data=JSON.parse(this.response);
 ...
}
xhr.send();

實際示例：

下載文件并保存到 HTML5 文件系統

假設您有一個圖片庫，想要提取一些圖片，然后使用 HTML5 文件系統本地保存這些圖片。一種方法是以 ArrayBuffer 形式請求圖片，通過數據構建 Blob，并使用 FileWriter 寫入 blob：

window.requestFileSystem=window.requestFileSystem || window.webkitRequestFileSystem;
function onError(e) {
 console.log('Error', e);
}
var xhr=new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType='arraybuffer';
xhr.onload=function(e) {
 window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs) {
 fs.root.getFile('image.png', {create: true}, function(fileEntry) {
 fileEntry.createWriter(function(writer) {
 writer.onwrite=function(e) { ... };
 writer.onerror=function(e) { ... };
 var bb=new BlobBuilder();
 bb.append(xhr.response);
 writer.write(bb.getBlob('image/png'));
 }, onError);
 }, onError);
 }, onError);
};
xhr.send();

請注意：要使用此代碼，請參閱“探索 FileSystem API”教程中的瀏覽器支持和存儲限制。

分割文件并上傳各個部分

使用 File API，我們可以將操作簡化為上傳大文件。我們采用的技術是：將要上傳的文件分割成多個部分，為每個部分生成一個 XHR，然后在服務器上將各部分組合成文件。這類似于 Gmail 快速上傳大附件的方法。使用這種技術還可以規避 Google 應用引擎對 http 請求的 32 MB 限制。

window.BlobBuilder=window.MozBlobBuilder || window.WebKitBlobBuilder ||
 window.BlobBuilder;
function upload(blobOrFile) {
 var xhr=new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload=function(e) { ... };
 xhr.send(blobOrFile);
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
 var blob=this.files[0];
 const BYTES_PER_CHUNK=1024 * 1024; // 1MB chunk sizes.
 const SIZE=blob.size;
 var start=0;
 var end=BYTES_PER_CHUNK;
 while(start < SIZE) {
 // Note: blob.slice has changed semantics and been prefixed. See http://goo.gl/U9mE5.
 if ('mozSlice' in blob) {
 var chunk=blob.mozSlice(start, end);
 } else {
 var chunk=blob.webkitSlice(start, end);
 }
 upload(chunk);
 start=end;
 end=start + BYTES_PER_CHUNK;
 }
}, false);
})();

用于在服務器上重組文件的代碼并未在此顯示。

趕快試試吧！

VG 動畫有很多種實現方法，也有很大SVG動畫庫，現在我們就來介紹 svg動畫實現方法都有哪些？

一、SVG 的 animation

SVG animation 有五大元素，他們控制著各種不同類型的動畫，分別為：

set
animate
animateColor
animateTransform
animateMotion

1.1、set

set 為動畫元素設置延遲，此元素是SVG中最簡單的動畫元素，但是他并沒有動畫效果。

使用語法：

<set attributeName="" attributeType="" to="" begin="" />

attributeName ：是要改變的元素屬性名稱。
attributeType ：是表明attributeName屬性值的列表，支持三個固定參數 CSS/XML/auto，如x,y以及transform屬于XML，opacity屬于CSS。auto是瀏覽器自動判別的意思，也是默認值，如果你不知道該選哪個就填auto，瀏覽器自己判別。
to ：動畫結束的屬性值。
begin ：動畫延遲時間。

eg：繪制一個半徑為200的圓，4秒之后，半徑變為50。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <set attributeName="r" attributeType="XML" to="50" begin="4s" />
 </circle>
</svg>

1.2、animate

是基礎的動畫元素，實現單屬性的過渡效果。

使用語法：

<animate 
 attributeName="r" 
 from="200" to="50" 
 begin="4s" dur="2s" 
 repeatCount="2"
></animate>

from ：過渡效果的屬性開始值。
to：過渡效果的屬性結束值。
begin：動畫開始時間。
dur：動畫過渡時間，控制動畫速度。
repeatCount：動畫重復次數。

eg：繪制一個半徑為200的圓，4秒之后半徑在2秒內從200逐漸變為50。

<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
 <animate attributeName="r" from="200" to="50" 
  begin="4s" dur="2s" repeatCount="2"></animate>
</circle>

1.3、animateColor

控制顏色動畫，animate也可以實現這個效果，所以該屬性目前已被廢棄。

1.4、animateTransform

實現transform變換動畫效果，與css3的transform變換類似。實現平移、旋轉、縮放等效果。

使用語法：

<animateTransform attributeName="transform"  type="scale" 
 from="1.5" to="0" 
 begin="2s"  dur="3s" 
 repeatCount="indefinite"></animateTransform>

repeatCount：重復次數，設置為 indefinite 表示無限循環，一直執行。
type：添加 transform 變換類型。
eg：繪制一個半徑為200的圓，4秒之后開始縮放，在2秒內從1.5縮小到0倍。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <animateTransform attributeName="transform" begin="4s"  
   dur="2s" type="scale" from="1.5" to="0" 
   repeatCount="indefinite"></animateTransform>
 </circle>
</svg>

1.5、animateMotion

可以定義動畫路徑，讓SVG各個圖形，沿著指定路徑運動。

使用語法：

<animateMotion 
 path="M 0 0 L 320 320" 
begin="4s" dur="2s"></animateMotion>

path：定義路徑，使用語法與《HTML5(八)——SVG 之 path 詳解》path的d屬性一致。
begin：延遲時間。
dur：動畫執行時間。

eg：繪制一個半徑為10的圓，延遲4秒從左上角運動的右下角。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">
  <animateMotion 
   path="M 0 0 L 320 320" 
   begin="4s" dur="2s"
   ></animateMotion>
 </circle>
</svg>

實際制作動畫的時候，動畫太單一不酷，需要同時改變多個屬性時，上邊的四種元素可以互相組合，同類型的動畫也能組合。以上這些元素雖然能夠實現動畫，但是無法動態地添加事件，所以接下來我們就看看 js 如何制作動畫。

二、JavaScript 控制

上篇文章我們介紹js可以操作path，同樣也可以操作SVG的內置形狀元素，還可以給任意元素添加事件。

給SVG元素添加事件方法與普通元素一樣，可以只用on+事件名或者addEventListener添加。

eg：使用SVG繪制地一條線，點擊線條地時候改變 x1 ,實現旋轉效果。

<svg width="800" height="800" id="svg">
    <line id="line" x1="100" y1="100" 
    x2="400" y2="300" 
    stroke="black" stroke-width="5"></line>  
  </svg>
<script>
 window.onload=function(){
  var line=document.getElementById("line")
  line.onclick=function(){
   let start=parseInt(line.getAttribute("x1")),
       end=400,dis=start-end
   requestAnimationFrame(next)
   let count=0;
   function next(){
    count++
    let a=count/200,cur=Math.abs(start+ dis*a)
    line.setAttribute('x1',cur)
    if(count<200)requestAnimationFrame(next)
   }
  }
 }
</script>

js制作的SVG動畫，主要利用 requestAnimationFrame 來實現一幀一幀的改變。

我們上述制作的 SVG 圖形、動畫等，運行在低版本IE中，發現SVG只有IE9以上才支持，低版本的并不能支持，為了兼容低版本瀏覽器，可以使用 VML ,VML需要添加額外東西，每個元素需要添加 v:元素，樣式中還需要添加 behavier ，經常用于繪制地圖。由于使用太麻煩，所以我們借助 Raphael.js 庫。

三、Rapha?l.js (拉斐爾)

Raphael.js是通過SVG/VML+js實現跨瀏覽器的矢量圖形，在IE瀏覽器中使用VML，非IE瀏覽器使用SVG，類似于jquery，本質還是一個javascript庫，使用簡單，容易上手。

使用之前需要先引入Raphael.js庫文件。cdn的地址為：https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js

3.1、創建畫布

Rapheal有兩種創建畫布的方式：

第一種：瀏覽器窗口上創建畫布

創建語法：

var paper=Raphael(x,y,width,height)

x,y是畫布左上角的坐標，此時畫布的位置是絕對定位，有可能會與其他html元素重疊。width、height是畫布的寬高。

第二種：在一個元素中創建畫布

創建語法：

var paper=Raphael(element, width, height);

element是元素節點本身或ID width、height是畫布的寬度和高度。

3.2、繪制圖形

畫布創建好之后，該對象自帶SVG內置圖形有矩形、圓形、橢圓形。他們的方法分別為：

paper.circle(cx, cy, r); // (cx , cy)圓心坐標 r 半徑
paper.rect(x, y, width, height, r); // (x,y)左上角坐標 width寬度 height高度 r圓角半徑(可選)
paper. ellipse(cx, cy, rx, ry); // (cx , cy)圓心坐標 rx水平半徑 ry垂直半徑

eg：在div中繪制一個圓形，一個橢圓、一個矩形。

<div id="box"></div>
<script>
 var paper=Raphael("box",300,300)
 paper.circle(150,150,150)
 paper.rect(0,0,300,300)
 paper.ellipse(150,150,100,150)
</script>

運行結果如下：

除了簡單圖形之外，還可以繪制復雜圖形，如三角形、心型，這時就使用path方法。

使用語法：paper.path(pathString)

pathString是由一個或多個命令組成，每個命令以字母開始，多個參數是由逗號分隔。

eg：繪制一個三角形。

let sj=paper.path("M 0,0 L100,100 L100,0 'Z'")

還可以繪制文字，如果需要換行，使用 \n 。

文字語法：paper.text(x,y,text)

(x,y)是文字坐標，text是要繪制的文字。

3.3、設置屬性

圖形繪制之后，我們通常會添加stroke、fill、stroke-width等讓圖形更美觀，Raphael使用attr給圖形設置屬性。

使用語法：circle.attr({"屬性名","屬性值","屬性名","屬性值",...})

如果只有屬性名沒有屬性值，則是獲取屬性，如果有屬性值，則是設置屬性。

注意：如果只設置一個屬性時，可以省略‘{}’。如：rect.attr('fill','pink')

eg：給上邊的矩形添加邊框和背景色。

<div id="box"></div>
<script>
 var paper=Raphael("box",300,300)
 let rect=paper.rect(100,100,150,200)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
</script>

3.4、添加事件

RaphaelJS一般具有以下事件：
click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及對應的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。

使用語法：

obj.click(function(){
 //需要操作的內容
})

3.5、添加動畫

animate為指定圖形添加動畫并執行。

使用語法：

obj.animate({
 "屬性名1":屬性值1,
 "屬性名2":屬性值2,
  ...
},time,type)

屬性名和屬性值就根據你想要的動畫類型加就ok。

time：動畫所需時間。

type：指動畫緩動類型。常用值有：

linear - 線性漸變
ease-in | easeIn | < - 由慢到快
ease-out | easeOut | > - 由快到慢
ease-in-out | easeInOut | <> - 由慢到快再到慢
back-in | backIn - 開始時回彈
back-out | backOut - 結束時回彈
elastic - 橡皮筋
bounce - 彈跳

eg：點擊矩形，矩形緩緩變大。

<div id="box"></div>
<script>
 var paper=Raphael("box",800,500)
 let rect=paper.rect(100,100,150,100)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
 rect.attr('fill','pink')
 rect.click(function(){
  rect.animate({
   "width":300,
   "height":300
  },1000,"bounce")
 })
</script>

復制上邊的代碼，分別在各個瀏覽器和低版本IE瀏覽器運行，發現都可以正常運行。SVG的動畫庫挺多了，我們介紹了拉斐爾，有興趣的小伙伴可以自行找找其他庫。

在線咨詢

上一篇：春節期間，南寧市這些辦事窗口有調整
下一篇：HTML(5)代碼規范：編寫可維護、可讀性高的HTM

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

XML 學習詳解

習思路

1.什么是XML

? 標記語言

? 可擴展

? 特點

2.Xml的作用

? 數據儲存

? 數據交換

二、XML結構

? 代碼舉例：

? 結構分析：

? 總結特點

三、XML語法

1.語法總則

2.文檔聲明

3.命名規則【標簽元素】

4.定義元素【標簽】

? Xml三種節點

? 元素的三種表現形式：

? 實例

5.定義屬性

? 描述

? 作用

? 注意使用事項

6.實體引用【CDATA區】

? 描述

? 實體引用

? 多個實體引用

7.注釋

8.批處理指令【了解】

四、PHP解析XML

1.什么是XML的解析

2.PHP解析XML方式

3.創建一個XML文件

? 創建步驟

? 最終代碼

4.DOM操作方式【了解】

? 實現原理

? 實現思路

? 使用語法

? 操作方法

? 讀取節點

? 增加節點

? 刪除節點

5.SimpleXML方式【重點】

? 實現原理

? 使用語法

使用函數

讀取節點

讀取節點屬性

創建節點

? 刪除節點

? 修改操作自己完成

6.DOM和SimpleXML對比

? 實現原理對比

? 代碼對比

六、XPATH

1.什么是XPATH

2.查找規則

3.XPATH在線詞典應用

1.完成需求

2.完成步驟

3.完成代碼

XMLHttpRequest2 新技巧

目錄

一、SVG 的 animation

二、JavaScript 控制

三、Rapha?l.js (拉斐爾)

您的項目需求