第1篇 SVG开发准备篇第1章 一起开始SVG的旅程 2
1.1 SVG概述 2
1.1.1 什么是SVG 2
1.1.2 SVG发展历程 3
1.2 SVG的特点 4
1.2.1 自身特点 4
1.2.2 与GML、VML技术的比较 4
1.2.3 与Flash技术的比较 6
1.3 体会SVG 7
1.4 SVG开发环境 8
1.4.1 SVG浏览器SVG Viewer介绍 8
1.4.2 SVG编辑器SVGDeveloper介绍 10
1.5 本章小结 15
第2章 XML与CSS 16
2.1 XML介绍 17
2.1.1 XML文档剖析 17
2.1.2 XML文档规则 18
2.2 CSS介绍 20
2.3 CSS基本语法 22
2.3.1 CSS定义 22
2.3.2 选择符组 22
2.3.3 类选择符 22
2.3.4 ID选择符 23
2.3.5 包含选择符 24
2.4 本章小结 24
第3章 JavaScript基础 25
3.1 JavaScript介绍 25
3.2 什么是DOM 27
3.3 编写JavaScript程序 27
3.3.1 JavaScript的变量 27
3.3.2 JavaScript的表达式和运算符 29
3.3.3 JavaScript的流程控制语句 30
3.3.4 JavaScript的函数 32
3.3.5 JavaScript的对象 32
3.3.6 JavaScript的数组 36
3.3.7 JavaScript中的内置对象 37
3.4 调试SVG中的JavaScript脚本 39
3.4.1 传统调试 39
3.4.2 异常处理 41
3.4.3 使用Visual Studio调试 43
3.5 SVGDeveloper的使用（1） 47
3.6 本章小结 48
第2篇 SVG基础规范篇第4章 基本数据类型和常见框架元素 50
4.1 基本数据类型 50
4.2 〈SVG〉元素 52
4.3 〈g〉元素 52
4.4 引用与〈defs〉元素 53
4.4.1 SVG中的引用 53
4.4.2 〈defs〉元素 54
4.4.3 〈use〉元素 54
4.4.4 〈symbol〉元素 55
4.5 〈desc〉元素和〈title〉元素 56
4.6 〈image〉元素 56
4.7 公共属性 57
4.8 本章小结 57
第5章 基本图形 58
5.1 线段：〈line〉元素 58
5.2 常用描边（Stroke）属性集 59
5.2.1 “stroke-width”属性 59
5.2.2 描边颜色属性 60
5.2.3 “stroke-opacity”参数 60
5.2.4 “stroke-dasharray”属性 60
5.2.5 “stroke-linecap”属性 61
5.2.6 “stroke-linejoin”属性 62
5.3 矩形：〈rect〉元素 62
5.4 圆：〈circle〉元素 63
5.5 椭圆：〈ellipse〉元素 63
5.6 折线：〈polyine〉元素 64
5.7 多边形：〈polygon〉元素 65
5.8 SVGDevelopet的使用（2） 66
5.8.1 绘制基本图形 66
5.8.2 设置图形颜色 67
5.8.3 设置图形其他属性 68
5.9 本章小结 69
第6章 路径 70
6.1 三种基本的绘图指令 70
6.1.1 移动当前点（MoveTo）和绘制直线（LineTo） 70
6.1.2 路径闭合（ClosePath） 71
6.2 复杂路径指令 72
6.2.1 三次贝塞尔曲线的绘制 72
6.2.2 二次贝塞尔曲线的绘制 73
6.2.3 椭圆弧曲线绘制 74
6.3 SVGDeveloper的使用（3） 75
6.4 本章小结 75
第7章 坐标系统与坐标转换 76
7.1 坐标系统与视口（ViewPort） 76
7.2 ViewBox属性 78
7.3 Transform属性 78
7.3.1 平移变换 79
7.3.2 旋转变换 79
7.3.3 伸缩变换 81
7.3.4 歪斜变换 82
7.3.5 矩阵变换 83
7.4 本章小结 85
第8章 装饰SVG图像 86
8.1 色彩渐变 86
8.1.1 线性渐变 86
8.1.2 放射渐变 88
8.1.3 带色彩渐变效果的箭头 90
8.2 模式填充 92
8.3 SVG中的CSS 94
8.3.1 在SVG中使用CSS 94
8.3.2 “style”属性常用参数一览 95
8.3.3 使用直接属性 97
8.3.4 使用“class”属性 98
8.4 SVGDeveloper的使用（4） 98
8.4.1 图形变换刷（Brush Transform） 98
8.4.2 使用CSS样式管理器 99
8.5 剪裁和遮罩 101
8.5.1 “overflow”和“clip”属性 101
8.5.2 〈clipPath〉元素 102
8.5.3 遮罩：〈mask〉元素 103
8.6 本章小结 105
第9章 文字与声音 106
9.1 文字：〈text〉元素 106
9.2 〈text〉中嵌套〈tspan〉元素 107
9.3 文字效果 108
9.3.1 文字装饰（text-decoration属性） 108
9.3.2 文字彩色描边 108
9.3.3 文字阴影 109
9.3.4 文字透明 109
9.3.5 沿着路径变化的文字 110
9.4 汉字编码与中文显示 110
9.4.1 汉字编码介绍 111
9.4.2 中文显示 112
9.5 声音：〈a:audio〉元素 115
9.6 本章小结 116
第10章 动画 117
10.1 SVG支持的SMIL动画元素的通用属性 117
10.1.1 与标识相关的常用属性 118
10.1.2 与时间控制相关的常用属性 118
10.1.3 与过程控制相关的常用属性 119
10.1.4 与动画叠加相关的常用属性 120
10.2 让SVG动起来——五种动画元素 120
10.2.1 〈animate〉元素 120
10.2.2 〈set〉元素 121
10.2.3 〈animateMotion〉元素 121
10.2.4 〈animateColor〉元素 122
10.2.5 〈animateTransform〉元素 122
10.3 SVGDeveloper的使用（5） 124
10.4 本章小结 125
第11章 绚烂的滤镜 126
11.1 〈filter〉元素 126
11.2 基本滤镜变换元素 127
11.3 简单滤镜 128
11.3.1 模糊与阴影效果——〈feGaussianBlur〉元素 128
11.3.2 扩边与缩边效果——〈feMophology〉元素 129
11.3.3 无限填充——〈feFlood〉元素 130
11.3.4 图像合并——〈feMerge〉元素 131
11.3.5 图像平铺——〈feTile〉元素 132
11.4 高级滤镜 133
11.4.1 光照效果滤镜 133
11.4.2 图像混合模式——〈feBlend〉元素 135
11.4.3 图像合成模式——〈feComposite〉元素 138
11.5 本章小结 138
第3篇 SVG应用篇 141
第12章 SVG的动态交互脚本 141
12.1 在SVG中使用JavaScript脚本 141
12.2 SVG DOM常用属性和方法介绍 142
12.2.1 文档初始化相关 142
12.2.2 DOM对象操作相关 143
12.2.3 事件对象evt相关 153
12.2.4 字符串及文本相关 155
12.2.5 样式相关 157
12.2.6 图形变换相关 158
12.2.7 XML序列化相关 161
12.3 SVG鼠标事件响应的四种写法 163
12.4 SVG事件类型总结 166
12.5 SVGDeveloper的使用（6） 168
12.6 本章小结 169
第13章 ASV3相关问题及常见技巧 170
13.1 ASV3在不同浏览器中存在的问题 170
13.2 SVG的DOM对象和浏览器的DOM对象之间的关系 171
13.3 重构ASV3右键菜单 172
13.4 SVG中的超级链接 176
13.5 ASV3浏览插件的自动安装 178
13.6 动态创建〈use〉元素 180
13.7 SVG图形拖动 181
13.8 SVG中的GUI 186
13.9 控制动画播放 190
13.10 SVG数字时钟 193
13.11 本章小结 194
第14章 使用SVG和XSLT实现统计图表 195
14.1 什么是XSLT 195
14.2 XSLT入门实例 197
14.3 XSLT语法简介 198
14.3.1 XPath介绍 198
14.3.2 XPath函数 199
14.3.3 模板规则〈xsl:template〉 201
14.3.4 取值〈xsl:value-of〉 202
14.3.5 循环〈xsl:for-each〉 202
14.3.6 条件判断〈xsl:if〉和〈xsl:choose〉 204
14.3.7 排序〈xsl:sort〉 207
14.3.8 变量〈xsl:variable〉和〈xsl:param〉 209
14.3.9 生成元素〈xsl:element〉 210
14.3.10 输出指定格式〈xsl:output〉 211
14.4 使用XML+XSLT生成SVG柱状图 212
14.4.1 原理分析 212
14.4.2 实例分析 212
14.4.3 实例执行 220
14.5 本章小结 226
第15章 SVG与数据库 227
15.1 什么是Ajax 227
15.2 模拟实时数据显示 230
15.2.1 原理分析 230
15.2.2 实例分析 231
15.3 非实时数据显示 235
15.4 不使用getURL函数的Ajax框架 238
15.5 本章小结 240
第16章 基于SVG的WebGIS平台 241
16.1 WebGIS介绍 241
16.2 系统架构 242
16.3 生成SVG格式地图 243
16.4 基本功能实现 246
16.4.1 地图初始化 246
16.4.2 中心缩放 251
16.4.3 地图漫游 253
16.4.4 拉框放大 255
16.4.5 图层控制 258
16.4.6 测距尺 260
16.4.7 鼠标提示框 263
16.4.8 数据标注 265
16.4.9 鹰眼漫游 270
16.4.10 地图复位 273
16.4.11 使用键盘进行地图漫游 273
16.5 动画效果 275
16.6 覆盖在地图上的提示 277
16.7 本章小结 278
第17章 性能优化 279
17.1 SVG优化 279
17.2 JavaScript脚本的优化 281
17.3 本章小结 285
附录A 中英文颜色对照表 286
附录B ASV最新版本对SVG的支持情况一览 291
附录C JavaScript常用函数 317
附录D SVG常用网址及工具集合 323