SVG精髓（第2版）

内容概要

J. David Eisenberg

一名程序员和教师。他开发了CSS、JavaScript、CGI、XML和Perl等多门编程课程，并在加州圣何塞常青谷学院教授计算机信息技术课程。他还著有Études for Erlang、Let's Read Hiragana以及本书第1版。

Amelia Bellamy-Royds

一位专门从事科学和技术交流的自由撰稿人。她通过参与Web Platform Docs、Stack Exchange和Codepen等在线社区，帮助推动Web标准和设计。

书籍目录

前言　　　　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　在元素内包含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　元素　　　　51

5.3.2　元素　　　　52

5.3.3　元素　　　　53

5.3.4　元素　　　　55

5.3.5　元素　　　　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　元素　　　　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　元素的基本属性　　　　106

9.3　文本对齐　　　　108

9.4　元素　　　　109

9.5　设置文本长度　　　　111

9.6　纵向文本　　　　112

9.7　国际化和文本　　　　113

9.7.1　Unicode和双向语言　　　　113

9.7.2　元素　　　　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　投影　　　　133

11.2.3　存储、链接以及合并滤镜结果　　　　134

11.3　创建发光式投影　　　　135

11.3.1　元素　　　　135

11.3.2　详解　　　　136

11.4　滤镜　　　　138

11.5　滤镜　　　　139

11.6　滤镜　　　　143

11.7　滤镜　　　　146

11.8　和滤镜　　　　147

11.9　光照效果　　　　148

11.9.1　漫反射照明　　　　149

11.9.2　镜面反射照明　　　　150

11.10　访问背景　　　　152

11.11　元素　　　　153

11.12　元素　　　　154

11.13　元素　　　　156

11.14　元素　　　　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　元素　　　　169

12.9　元素　　　　169

12.10　元素　　　　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

作者简介

《SVG精髓（第2版）》通过实例透彻讲解了SVG（可缩放矢量图形）这种标记语言的规范及应用。作者从简单的SVG应用开始，带领读者逐步探索了SVG的复杂功能，包括滤镜、变换、渐变和模式。从应用层面看，本书涵盖了动画、交互图形和动态SVG编程等技术，不仅能为有经验的开发人员提供重要参考，同时通过讲解基本的XML和CSS技术，为没有Web开发经验的读者提供了入门捷径。

 SVG精髓（第2版）下载