前言　　　　xii
第1章　入門指南　　　　1
1.1　圖形係統　　　　1
1.1.1　柵格圖形　　　　1
1.1.2　矢量圖形　　　　2
1.1.3　柵格圖形的用途　　　　2
1.1.4　矢量圖形的用途　　　　2
1.2　可縮放　　　　3
1.3　SVG的作用　　　　5
1.4　創建一個SVG圖像　　　　5
1.4.1　文檔結構　　　　5
1.4.2　基本形狀　　　　6
1.4.3　指定樣式屬性　　　　6
1.4.4　圖形對象分組　　　　7
1.4.5　變換坐標係統　　　　8
1.4.6　其他基本圖形　　　　8
1.4.7　路徑　　　　9
1.4.8　文本　　　　10
第2章　在網頁中使用SVG　　　　12
2.1　將SVG作為圖像　　　　12
2.1.1　在<img>元素內包含SVG　　　　13
2.1.2　在CSS中包含SVG　　　　14
2.2　將SVG作為應用程序　　　　15
2.3　混閤文檔中的SVG標記　　　　16
2.3.1　SVG中的foreign object　　　　16
2.3.2　在XHTML或者HTML5中內聯SVG　　　　18
2.3.3　其他XML應用程序中的SVG　　　　20
第3章　坐標係統　　　　21
3.1　視口　　　　21
3.2　使用默認用戶坐標　　　　22
3.3　為視口指定用戶坐標　　　　24
3.4　保留寬高比　　　　25
3.4.1　為preserveAspectRatio指定對齊方式　　　　26
3.4.2　使用meet說明符　　　　27
3.4.3　使用slice說明符　　　　28
3.4.4　使用none說明符　　　　29
3.5　嵌套坐標係統　　　　29
第4章　基本形狀　　　　32
4.1　綫段　　　　32
4.2　筆畫特性　　　　33
4.2.1　stroke-width　　　　33
4.2.2　筆畫顔色　　　　34
4.2.3　stroke-opacity　　　　35
4.2.4　stroke-dasharray屬性　　　　36
4.3　矩形　　　　37
4.4　圓和橢圓　　　　39
4.5　多邊形　　　　40
4.6　摺綫　　　　42
4.7　綫帽和綫連接　　　　43
4.8　基本形狀總結　　　　44
4.8.1　形狀元素　　　　45
4.8.2　指定顔色　　　　45
4.8.3　筆畫和填充特性　　　　46
第5章　文檔結構　　　　47
5.1　結構和錶現　　　　47
5.2　在SVG中使用樣式　　　　48
5.2.1　內聯樣式　　　　48
5.2.2　內部樣式錶　　　　48
5.2.3　外部樣式錶　　　　49
5.2.4　錶現屬性　　　　50
5.3　分組和引用對象　　　　51
5.3.1　<g>元素　　　　51
5.3.2　<use>元素　　　　52
5.3.3　<defs>元素　　　　53
5.3.4　<symbol>元素　　　　55
5.3.5　<image>元素　　　　56
第6章　坐標係統變換　　　　58
6.1　translate變換　　　　58
6.2　scale變換　　　　60
6.3　變換序列　　　　63
6.4　技巧：笛卡兒坐標係統轉換　　　　65
6.5　rotate變換　　　　67
6.6　技巧：圍繞中心點縮放　　　　69
6.7　skewX和skewY變換　　　　69
6.8　變換總結　　　　70
6.9　CSS變換和SVG　　　　71
第7章　路徑　　　　72
7.1　moveto、lineto和closepath　　　　72
7.2　相對moveto和lineto　　　　75
7.3　路徑的快捷方式　　　　75
7.3.1　水平和垂直lineto命令　　　　75
7.3.2　路徑快捷方式錶示法　　　　76
7.4　橢圓弧　　　　76
7.5　從其他弧綫格式轉換　　　　79
7.6　貝塞爾麯綫　　　　79
7.6.1　二次貝塞爾麯綫　　　　80
7.6.2　三次貝塞爾麯綫　　　　82
7.7　路徑總結　　　　84
7.8　路徑和填充　　　　84
7.9　<marker>元素　　　　85
7.10　標記記錄　　　　88
第8章　圖案和漸變　　　　90
8.1　圖案　　　　90
8.1.1　patternUnits　　　　91
8.1.2　patternContentUnits　　　　92
8.1.3　圖案嵌套　　　　94
8.2　漸變　　　　95
8.2.1　linearGradient元素　　　　95
8.2.2　radialGradient元素　　　　99
8.2.3　漸變總結　　　　102
8.3　變換圖案和漸變　　　　103
第9章　文本　　　　105
9.1　文本的相關術語　　　　105
9.2　<text>元素的基本屬性　　　　106
9.3　文本對齊　　　　108
9.4　<tspan>元素　　　　109
9.5　設置文本長度　　　　111
9.6　縱嚮文本　　　　112
9.7　國際化和文本　　　　113
9.7.1　Unicode和雙嚮語言　　　　113
9.7.2　<switch>元素　　　　114
9.7.3　使用自定義字體　　　　115
9.8　文本路徑　　　　117
9.9　空白和文本　　　　119
9.10　案例學習：為圖形添加文本　　　　120
第10章　裁剪和濛版　　　　122
10.1　裁剪路徑　　　　122
10.2　濛版　　　　125
10.3　案例學習：為圖形應用濛版　　　　129
第11章　濾鏡　　　　131
11.1　濾鏡的工作原理　　　　131
11.2　創建投影效果　　　　132
11.2.1　建立濾鏡的邊界　　　　132
11.2.2　投影<feGaussianBlur>　　　　133
11.2.3　存儲、鏈接以及閤並濾鏡結果　　　　134
11.3　創建發光式投影　　　　135
11.3.1　<feColorMatrix>元素　　　　135
11.3.2　<feColorMatrix>詳解　　　　136
11.4　<feImage>濾鏡　　　　138
11.5　<feComponentTransfer>濾鏡　　　　139
11.6　<feComposite>濾鏡　　　　143
11.7　<feBlend>濾鏡　　　　146
11.8　<feFlood>和<feTile>濾鏡　　　　147
11.9　光照效果　　　　148
11.9.1　漫反射照明　　　　149
11.9.2　鏡麵反射照明　　　　150
11.10　訪問背景　　　　152
11.11　<feMorphology>元素　　　　153
11.12　<feConvolveMatrix>元素　　　　154
11.13　<feDisplacementMap>元素　　　　156
11.14　<feTurbulence>元素　　　　158
11.15　濾鏡總結　　　　159
第12章　SVG動畫　　　　161
12.1　動畫基礎　　　　162
12.2　動畫時間詳解　　　　164
12.3　同步動畫　　　　164
12.4　重復動作　　　　165
12.5　對復雜的屬性應用動畫　　　　166
12.6　指定多個值　　　　167
12.7　多級動畫時間　　　　168
12.8　<set>元素　　　　169
12.9　<animateTransform>元素　　　　169
12.10　<animateMotion>元素　　　　171
12.11　為運動指定關鍵點和時間　　　　173
12.12　使用CSS處理SVG動畫　　　　174
12.12.1　動畫屬性　　　　174
12.12.2　設置動畫關鍵幀　　　　175
12.12.3　CSS中的動畫運動　　　　176
第13章　添加交互　　　　177
13.1　在SVG中使用鏈接　　　　177
13.2　控製CSS動畫　　　　179
13.3　用戶觸發的SMIL動畫　　　　180
13.4　使用腳本控製SVG　　　　181
13.4.1　事件概覽　　　　183
13.4.2　監聽和響應事件　　　　184
13.4.3　修改多個對象的屬性　　　　185
13.4.4　拖拽對象　　　　188
13.4.5　與HTML頁麵交互　　　　191
13.4.6　創建新元素　　　　195
第14章　使用SVG DOM　　　　198
14.1　確定元素的屬性值　　　　198
14.2　SVG接口方法　　　　203
14.3　使用ECMAScript/JavaScript創建SVG　　　　207
14.4　使用腳本控製動畫　　　　210
14.5　使用JavaScript庫　　　　214
14.6　Snap中的事件處理　　　　219
14.6.1　點擊對象　　　　220
14.6.2　拖拽對象　　　　220
第15章　生成SVG　　　　222
15.1　將自定義數據轉換為SVG　　　　223
15.2　使用XSLT將XML數據轉換為SVG　　　　226
15.2.1　定義任務　　　　226
15.2.2　XSLT的工作方式　　　　228
15.2.3　編寫XSL樣式錶　　　　230
附錄A　SVG中需要的XML知識　　　　238
附錄B　樣式錶介紹　　　　249
附錄C　編程概念　　　　255
附錄D　矩陣代數　　　　263
附錄E　創建字體　　　　270
附錄F　將圓弧轉換為不同的格式　　　　273
作者簡介　　　　277
封麵介紹　　　　277
· · · · · · (收起)