●前言 xii
章 入門指南 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 在＜im素內包含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 ＜素 51
5.3.2 ＜us素 52
5.3.3 ＜def素 53
5.3.4 ＜symbo素 55
5.3.5 ＜imag素 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 ＜marke素 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 linearGradie素 95
8.2.2 radialGradie素 99
8.2.3 漸變總結 102
8.3 變換圖案和漸變 103
第9 章 文本 105
9.1 文本的相關術語 105
9.2 ＜tex素的基本屬性 106
9.3 文本對齊 108
9.4 ＜tspa素 109
9.5 設置文本長度 111
9.6 縱向文本 112
9.7 國際化和文本 113
9.7.1 Unicode 和雙向語言 113
9.7.2 ＜switc素 114
9.7.3 使用自定義字體 115
9.8 文本路徑 117
9.9 空白和文本 119
9.10 案例學習：為圖形添加文本 120
0 章 裁剪和蒙版 122
10.1 裁剪路徑 122
10.2 蒙版 125
10.3 案例學習：為圖形應用蒙版 129
1 章 濾鏡 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 ＜feColorMatri素 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 ＜feMorpholog素 153
11.12 ＜feConvolveMatri素 154
11.13 ＜feDisplacementMa素 156
11.14 ＜feTurbulenc素 158
11.15 濾鏡總結 159
2 章 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 ＜se素 169
12.9 ＜animateTransfor素 169
12.10 ＜animateMotio素 171
12.11 為運動指定關鍵點和時間 173
12.12 使用CSS 處理SVG 動畫 174
12.12.1 動畫屬性 174
12.12.2 設置動畫關鍵幀 175
12.12.3 CSS 中的動畫運動 176
3 章 添加交互 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
4 章 使用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
5 章 生成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將圓弧轉換為不同的格式
作者簡介
封面介紹