基于XML的SVG应用指南PDF电子书下载

第1章 SVG简介 1

1.1 什么是SVG 1

1.2 SVG的特点 1

1.2.1 基于XML标准 1

1.2.2 矢量图形 1

1.2.3 由文本构成的图像 2

1.2.4 灵活的文件格式 2

1.2.5 支持交互性 3

1.2.6 内嵌字型数据 3

1.3 SVG的历史 3

1.4 SVG展望 4

1.5 SVG、门实例 4

第2章 SVG的格式基础——XML 7

2.1 XML简介 7

2.2 XML文档的结构分析 8

2.2.1 一个XML文档的例子 8

2.2.2 XML的内容描述 8

2.2.3 XML的格式规定 10

2.3 XML的语法结构与规则 12

2.4 XML常用语句 13

2.5 结束语 14

第3章 SVG基本要素 15

3.1 简介 15

3.2 基本概念 15

3.2.1 可升级 15

3.2.2 矢量图形 16

3.2.3 图像 16

3.2.4 样式 16

3.2.5 图像对象与符号 17

3.2.6 滤镜 17

3.2.7 字体问题 17

3.2.8 动画 17

3.3 渲染模型 18

3.3.1 绘图模式、渲染顺序和组 18

3.3.2 图像元素的类型 18

3.3.3 滤镜、剪裁、遮罩和透明度 18

3.4 SVG坐标系简介 19

3.5 初始化视口和坐标系 20

3.5.1 初始化视口 20

3.5.2 初始化坐标系 21

3.6 SVG的基本数据类型 22

3.6.1 角度值和颜色值 22

3.6.2 坐标值和长度值 23

3.6.3 整型值、实型值和百分值 23

3.6.4 列表值和绘图值 23

3.6.5 时间值和URI 23

3.6.6 频率值 23

3.7 DOM接口 24

3.8 结束语 24

第4章 SVG的框架元素 25

4.1 简介 25

4.2 <svg>元素 25

4.3 <g>元素 25

4.4 <desc>元素与<title>元素 27

4.5 <defs>元素与引用规则 27

4.5.1 引用 27

4.5.2 <defs>元素 28

4.5.3 <use>元素 29

4.5.4 <symbol>元素 30

4.6 引用外部点阵图像 31

4.7 公共属性 32

4.8 条件处理与<switch>元素 33

4.9 结束语 34

第5章 SVG的基本形状元素 35

5.1 简介 35

5.2 <rect>元素 35

5.2.1 <rect>元素的一些重要属性 35

5.2.2 矩形绘制实例 36

5.3 <circle>元素 37

5.3.1 <circle>元素的一些重要属性 37

5.3.2 圆绘制实例 37

5.4 <ellipse>元素 38

5.4.1 <ellipse>元素的一些重要属性 38

5.4.2 椭圆绘制实例 38

5.5 <line>元素 39

5.5.1 <line>元素的一些重要属性 39

5.5.2 线段绘制实例 39

5.6 <polyline>元素 40

5.6.1 <polyline>元素的一些重要属性 40

5.6.2 折线绘制实例 40

5.7 <polygon>元素 41

5.7.1 <polygon>元素的一些重要属性 41

5.7.2 多边形绘制实例 42

5.8 结束语 43

第6章 路径 44

6.1 简介 44

6.2 <path>元素的属性 44

6.3 路径数据的表示方法 44

6.3.1 简述 44

6.3.2 移动当前点的命令 46

6.3.3 绘制直线的命令 46

6.3.4 路径闭合命令 46

6.3.5 绘制曲线的命令 46

6.3.6 椭圆弧曲线命令 50

6.4 路径的长度 52

6.5 结束语 52

第7章 坐标变换 53

7.1 简介 53

7.2 <svg>元素的“viewBox”属性 53

7.3 “transform”属性 54

7.3.1 平移变换(translate) 54

7.3.2 旋转变换(rotate) 56

7.3.3 伸缩变换(scale) 57

7.3.4 歪斜变换(skew) 59

7.3.5 矩阵变换(matrix) 61

7.4 “preserveAspectRatio”属性 61

7.5 建立新视口 63

7.6 长度单位 64

7.7 结束语 64

第8章 文字 65

8.1 简介 65

8.2 <text>元素 65

8.3 <tspan>元素 66

8.3.1 <tspan>元素的属性 66

8.3.2 <tspan>元素应用实例 66

8.4 <tref>元素 68

8.5 字型替换 70

8.5.1 <glyphRun>元素 70

8.5.2 <altGlyph>元素 71

8.5.3 <altGlyphDef>元素 72

8.5.4 <glyphRef>元素 72

8.6 文字编排 72

8.7 按路径排列文字 73

8.8 选择字体 77

8.9 文字对齐与定位 78

8.9.1 文字对齐 78

8.9.2 基线定位 78

8.10 文字修饰 78

8.11 文字的选择与剪贴板操作 80

8.12 编码与汉字的使用 80

8.13 结束语 81

第9章 字体 82

9.1 简介 82

9.2 <font>元素 82

9.3 <glyph>与<missing-glyph>元素 84

9.4 <hkern>与<vkern>元素 85

9.5 字体的描述 86

9.6 结束语 87

第10章 绘图 88

10.1 简介 88

10.2 绘图操作的通用属性 88

10.3 “fill”的各种附加参数 89

10.3.1 “fill-rule”参数 89

10.3.2 “fill-opacity”参数 93

10.4 “stroke”的各种附加参数 94

10.4.1 “stroke-width”参数 94

10.4.2 “stroke-linecap”参数 95

10.4.3 “stroke-1inejoin”参数 96

10.4.4 “stroke-dasharray”参数 97

10.4.5 “stroke-dashoffset”参数 98

10.4.6 “stroke-opacity”参数 100

10.5 箭头标记的使用 100

10.5.1 “marker”定义时的各种属性 100

10.5.2 其他与“market”有关的参数 101

10.6 与渲染有关的属性 102

10.6.1 “color-interpolation”属性 102

10.6.2 “color-rendering”属性 103

10.6.3 “shape-rendering”属性 103

10.6.4 “text-rendering”属性 103

10.6.5 “image-rendering”属性 103

10.7 绘图属性的继承 103

10.8 结束语 104

第11章 超级链接 105

11.1 简介 105

11.2 <a>元素 105

11.3 超级链接的定义形式 107

11.4 结束语 108

第12章 样式 109

12.1 简介 109

12.2 “style”属性的参数 109

12.3 使用直接属性 111

12.4 使用CSS 112

12.4.1 引用外部CSS文件 112

12.4.2 内嵌CSS语句 114

12.5 使用“class”属性 115

12.6 结束语 116

第13章 色彩渐变与模式填充 117

13.1 简介 117

13.2 色彩渐变 117

13.2.1 线性渐变 117

13.2.2 放射状渐变 118

13.2.3 <stop>元素 119

13.2.4 线性渐变实例 120

13.2.5 放射状渐变实例 122

13.3 模式填充 124

13.3.1 模式填充的属性 124

13.3.2 模式填充实例 125

13.4 结束语 126

第14章 剪裁、遮罩与图像合成 127

14.1 简介 127

14.2 剪裁 127

14.2.1 “overflow”和“clip”属性 127

14.2.2 <clipPath>元素 128

14.3 遮罩 130

14.4 透明度 132

14.5 图像合成 135

14.6 结束语 136

第15章 滤镜(一) 137

15.1 简介 137

15.2 <filter>元素 139

15.3 基本滤镜变换概述 140

15.4 光源与光照模式 141

15.4.1 光源的种类 141

15.4.2 光照模式 142

15.4.3 光照效果实例 143

15.5 高斯模糊与偏移 145

15.5.1 <feGaussianBlur>元素 145

15.5.2 <offset>元素 146

15.6 扩边与缩边 147

15.6.1 <feMophology>元素 147

15.6.2 扩边及缩边效果示例 147

15.7 无限填充 149

15.8 合并图像 150

15.9 插入外部图像 151

15.10 图像平铺 151

15.11 结束语 153

第16章 滤镜(二) 154

16.1 图像的混合模式 154

16.1.1 <feBlend>元素 154

16.1.2 <feBlend>元素应用实例 155

16.2 色彩矩阵变换 157

16.2.1 <feColorMatrix>元素 157

16.2.2 色彩矩阵变换实例 159

16.3 色彩函数变换 161

16.3.1 <feComponentTransfer>元素 161

16.3.2 色彩函数变换实例 162

16.4 矩阵卷积变换 165

16.5 图像的合成模式 168

16.6 偏移映射 169

16.6.1 <feDisplacementMap>元素 169

16.6.2 偏移映射实例 169

16.7 噪波与紊流变换 171

16.7.1 <feTurbulence>元素 171

16.7.2 噪波和紊流变换实例 172

16.8 结束语 174

第17章 脚本与交互 176

17.1 简介 176

17.2 内嵌脚本语言——<script>元素 176

17.3 事件 178

17.4 控制鼠标光标的形状 180

17.4.1 “cursor”参数 180

17.4.2 <cursor>元素 181

17.5 与外部脚本交互 181

17.6 脚本应用实例——动态导航条 182

17.7 结束语 186

第18章 动画 187

18.1 简介 187

18.2 动画元素的类型 187

18.3 动画元素的通用属性 189

18.3.1 标识所作用元素 189

18.3.2 标识所作用属性或样式参数 189

18.3.3 控制动画播放时间 189

18.3.4 控制动画过程 191

18.3.5 控制动画的叠加 193

18.4 5个动画元素 193

18.4.1 <animate>元素 193

18.4.2 <set>元素 193

18.4.3 <animateMotion>元素 194

18.4.4 <animateColor>元素 196

18.4.5 <animateTransform>元素 197

18.5 结束语 199

第19章 声音和其他扩展 200

19.1 简介 200

19.2 声音与<a∶audio>元素 200

19.3 嵌入外部数据 201

19.4 在网页中插入SVG图像 202

19.5 SVG的其他特点 204

19.6 结束语 204

第20章 制作简单的SVG图像 205

20.1 简介 205

20.2 Mayura Draw 3.62简述 205

20.3 菜单栏和工具栏 206

20.3.1 菜单栏 206

20.3.2 标准工具栏 207

20.3.3 高级工具栏 207

20.3.4 绘图工具栏 207

20.3.5 色彩工具栏 208

20.4 绘制简单的图形 208

20.4.1 绘制普通几何形体 208

20.4.2 描边与填充 209

20.5 文字与外部图像 211

20.5.1 文字的处理 211

20.5.2 插入外部图像 211

20.6 变形处理 212

20.7 Mayura Draw简单实例 212

20.8 结束语 215

第21章 使用Illustrator 9.0 216

21.1 简介 216

21.2 Illustrator9.0基础 216

21.2.1 工作界面 216

21.2.2 面板参数设置 217

21.3 基本的绘图操作 219

21.4 输出SVG文件 220

21.4.1 将作品输出成SVG文件 220

21.4.2 SVG输出选项设置 221

21.5 滤镜 223

21.6 交互性设置 225

21.7 结束语 226

第22章 SVG综合实例 228

22.1 简介 228

22.2 SVG网页 228

22.3 动态滤镜 236

22.4 时钟 238

22.5 文本输入框 241

22.6 结束语 243

附录一 颜色值表 244

附录二 样式参数表 250

附录三 检验SVG插件的JavaScript源程序 262

附录四 SVG工具一览 268