前言　　　　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