SVG开发实践PDF电子书下载

第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