SVG开发实践

http://book.csdn.net/bookfiles/605/10060519571.shtml  SVG开发实践

 

Web矢量图形技术领域出现了百家争鸣的盛况，从早期出现的Flash、VML，到后来的SVG，乃至近期才出现的微软的SilverLight，各大公司或组织都想在这个领域分一杯羹。SVG以其标准的开放性、易用性和优秀的效果在该领域占据了一席之地。国内乃至全世界，SVG的应用都越来越多，手机、GIS、化学、电力等行业或领域都出现了SVG的身影。

第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  SVGDeveloper的使用（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应用篇
第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