一. SVG是什么？
- SVG 意為可縮放矢量圖形(Scalable Vectors Graphics)。
- SVG 圖形在放大或者改變尺寸的情況下，其圖形的質(zhì)量不會(huì)有所損失。
- SVG 使用 XML 格式定義圖形。
- SVG 文件是純粹的 XML。
- SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)。
- SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個(gè)整體。
二. 代碼解釋（書p138實(shí)例）
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>Star 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<polygon id="Star-1" stroke="#979797" stroke-width="3" fill="#F8E81C" sketch:type="MSShapeGroup" points="99 154 40.2214748 184.901699 51.4471742 119.45085 3.89434837 73.0983006 69.6107374 63.5491503 99 4 128.389263 63.5491503 194.105652 73.0983006 146.552826 119.45085 157.778525 184.901699 "></polygon>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
- XML
Extentsible Markup Language(可擴(kuò)展標(biāo)記語言)，用來定義其它語言的一種元語言，其前身是SGML(標(biāo)準(zhǔn)通用標(biāo)記語言)。它沒有標(biāo)簽集(tag set)，也沒有語法規(guī)則(grammatical rule)，但是它有句法規(guī)則(syntax rule)。
▲XML和HTML的區(qū)別
① XML不是HTML的替代品，XML和HTML是兩種不同用途的語言。
② XML是用來描述數(shù)據(jù)的，重點(diǎn)是:什么是數(shù)據(jù)，如何存放數(shù)據(jù)。
③ HTML是用來顯示數(shù)據(jù)的，重點(diǎn)是:顯示數(shù)據(jù)以及如何顯示數(shù)據(jù)更好上面。
④ HTML是與顯示信息相關(guān)的, XML則是與描述信息相關(guān)的。
-
version="1.0"定義所使用的SVG版本 -
standalone="no"standalone 這個(gè)屬性規(guī)定這個(gè) SVG 文件是否是“獨(dú)立的”，還是有引用外部文件。standalone="no" 意味著 SVG 文件不是獨(dú)立的，會(huì)引用外部文件。
<svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-
width="198px" height="188px" viewBox="0 0 198 188"
SVG的根元素：width、height和viewbox屬性
▲viewbox（視框）
| 解釋 | 定義了SVG中所有形狀都需要遵循的坐標(biāo)系 |
|---|---|
| 值 | 包含4個(gè)參數(shù)的列表 min-x, min-y, width and height， 以空格或者逗號(hào)分隔開 |
| 屬性 | △preserveAspectRatio屬性表示是否強(qiáng)制進(jìn)行統(tǒng)一縮放 |
| 可用元素 | <svg><symbol><image><marker><pattern><view> |
▲▲▲ 命名空間
-
xmlns="http://www.w3.org/2000/svg"
https://www.w3.org/2000/svg是一個(gè)XML名稱空間，最早在SVG1.0規(guī)范中定義，隨著2.0/3.0等版本更新其名稱是可變的。隨著W3??C技術(shù)報(bào)告的發(fā)布逐漸添加名稱。 -
xmlns:xlink="http://www.w3.org/1999/xlink"
https://www.w3.org/1999/xlink是XML鏈接語言（XLink）規(guī)范中定義的XML名稱空間 。 - 聲明命名空間
<svg xmlns="http://www.w3.org/2000/svg">
<!-- more tags here -->
</svg>
命名空間聲明由xmlns屬性提供。此屬性表示<svg>標(biāo)記及其子標(biāo)記屬于名稱空間為“http://www.w3.org/2000/svg”的XML方言，當(dāng)然，它是SVG。注意，命名空間聲明只需要在根標(biāo)記上提供一次。聲明定義了默認(rèn)命名空間，因此用戶代理知道所有<svg>標(biāo)簽的后代標(biāo)簽也屬于同一命名空間。用戶代理檢查他們是否屬于同一個(gè)命名空間，如果是的話才去如何處理命名空間下的標(biāo)簽標(biāo)記。
??注意，命名空間名稱只是字符串，盡管SVG命名空間名稱看起來像URI，但這并不重要。URI通常被使用，因?yàn)樗鼈兪俏ㄒ坏模康牟皇恰版溄印蹦程帯＃ㄊ聦?shí)上??，URI經(jīng)常使用，通常使用術(shù)語“命名空間URI”而不是“命名空間名稱”。）
- 重新聲明默認(rèn)命名空間
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<!-- some XHTML tags here -->
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
<!-- some SVG tags here -->
</svg>
<!-- some XHTML tags here -->
</body>
</html>
在此示例中，根<html>標(biāo)簽上的xmlns屬性將默認(rèn)名稱空間聲明為XHTML。因此，除了<svg>標(biāo)記，用戶代理將其及其所有子標(biāo)記解釋為屬于XHTML。 <svg>標(biāo)記具有自己的xmlns屬性，通過重新聲明默認(rèn)命名空間，這告訴用戶代理，<svg>標(biāo)記及其后代（除非他們也重新編寫默認(rèn)命名空間）屬于SVG。
- 聲明命名空間前綴
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="cool-script.js" type="text/ecmascript"/>
</svg>
命名空間前綴用于前綴屬性名稱和標(biāo)簽名稱。這是通過在屬性名稱之前放置命名空間前綴和冒號(hào)來實(shí)現(xiàn)的，如上例中的<script>標(biāo)記所示。這告訴用戶代理該特定屬性屬于分配給命名空間前綴（XLink）的命名空間，并且它是可以用于具有相同含義的其他標(biāo)記上。
??請(qǐng)注意，使用未綁定到命名空間名稱前綴是XML錯(cuò)誤。盡管xlink：href屬性不會(huì)導(dǎo)致錯(cuò)誤，但上面示例中由xmlns：xlink屬性創(chuàng)建的綁定是絕對(duì)必要的。這個(gè)XLink屬性在SVG中經(jīng)常在<a>，<use>和<image>標(biāo)簽等中使用，所以最好在文檔中始終包含XLink聲明。
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-
stroke圖形輪廓的顏色
stroke-width圖形輪廓的寬度
這兩個(gè)屬性控制圖形的輪廓該怎么顯示。這里把圓形的輪廓設(shè)置為 1px 寬，邊框無填充顏色。 -
fill填充顏色（設(shè)置形狀內(nèi)的顏色） -
fill-rule填充規(guī)則
| 解釋 | 如何判斷路徑的哪一側(cè)在路徑所構(gòu)成的形狀的內(nèi)部，從而判斷fill屬性如何給這個(gè)形狀上色。 |
|---|---|
| 類別 | 外觀屬性 |
| 值 | nonzero / evenodd / inherit |
-
nonzero
這個(gè)值確定了某點(diǎn)屬于該形狀的“內(nèi)部”還是“外部”。從點(diǎn)向任意方向的無限遠(yuǎn)處繪制射線，然后檢測(cè)形狀與射線相交的位置。開始于0數(shù)，射線上每次從左向右相交就加1，每次從右向左相交就減1。數(shù)一下相交次數(shù)，如果結(jié)果是0，點(diǎn)就在路徑外面，否則認(rèn)為，點(diǎn)在路徑里面。
nonzero "非零" -
evenodd
這個(gè)值用確定了某點(diǎn)屬于該形狀的“內(nèi)部”還是“外部”。從點(diǎn)向任意方向的無限遠(yuǎn)處繪制射線，并數(shù)一數(shù)給定形狀與射線相交的路徑段的數(shù)目，如果數(shù)目是奇數(shù)的，點(diǎn)在內(nèi)部，如果數(shù)目是偶數(shù)的，點(diǎn)在外部。
evenodd "奇偶"
- DTD文件類型
DTD一共有三大類型：
（1）嚴(yán)格型的DTD
在嚴(yán)格型的DTD中，不能再使用各種表現(xiàn)的標(biāo)記。如：<font>、<b>、<body bgColor>
要求必須使用CSS來取代各種表現(xiàn)標(biāo)記。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
（2）過渡型的DTD
在過渡型的DTD中，可以繼續(xù)使用HTML中的表現(xiàn)的寫法。
這些表現(xiàn)標(biāo)記，還可以繼續(xù)使用。如：<font>、<b>、<body bgColor> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
（3）框架的DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
三. 在web頁面中插入SVG
- 使用img標(biāo)簽
<img src="xxxx.svg" alt="對(duì)圖片的文字描述">
- 使用object標(biāo)簽
<object data="img/svgfile.svg" type="image/svg+xml">
data屬性是你鏈接SVG資源的方式
type屬性描述了內(nèi)容的MIME類型
image/svg+xml是SVG的MIME類型（互聯(lián)網(wǎng)媒體類型：其消息能包括文本、圖像、音頻、視頻以及其他應(yīng)用程序?qū)Ｓ玫臄?shù)據(jù)）
- 把SVG作為背景圖像插入
-
內(nèi)聯(lián)不同插入方式下可以使用的功能.png
四. 添加樣式和動(dòng)畫
- 使用外部樣式表為SVG添加樣式
1. <link href="styles.css" type="text/css" rel="stylesheet"/>
2. <?xml-stylesheet href="styles.css" type="text/css"?> ?better！
- 使用內(nèi)聯(lián)樣式為SVG添加樣式
<defs>
<style type="text/css">
<![CDATA[
#star_path {
stroke: red;
}
]]>
</style>
</defs>
- 用CSS為SVG添加動(dòng)畫
animation-動(dòng)畫
.star_Wrapper {
animation: spin 2s 1s;
transform-origin: 50% 50%;
}
