前言 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
· · · · · · (
收起)