《SVG精髓（第2版）》详尽介绍了可缩放矢量图形（SVG）技术。SVG是一种标记语言，为大多数矢量绘图程序和交互式Web图形工具所使用。本书将带你详细了解SVG的功能，首先学习简单的SVG应用，如绘制线条，然后逐步探索复杂的特性，比如滤镜、变换、渐变和图案等。

本书第2版扩展了动画、交互式图形以及SVG编程等内容。交互式的在线示例让你很容易在Web浏览器中实验SVG的特性。本书还为经验丰富的设计师准备了6个附录，解释了XML标记和CSS样式等基本概念，因此即使你没有网页设计的经验，也可以开始学习SVG。

通过阅读本书，你将能够：

为网页创建高质量、高分辨率的图形；

创建通过搜索引擎或辅助技术易于访问的图表和装饰性标题；

用SVG蒙版、滤镜以及变换给图形、文本和照片添加艺术效果；

用SVG标记动画绘制图形，使用CSS和JavaScript添加交互；

根据现有的矢量数据或XML数据使用编程语言或XSLT创建SVG。

SVG精髓 第2版 内容简介

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

SVG精髓 第2版 目录

第1章 入门指南

1.1图形系统

1.1.1栅格图形

1.1.2矢量图形

1.1.3栅格图形的用途

1.1.4矢量图形的用途

1.2可缩放

1.3 SVG的作用

1.4创建一个SVG图像

1.4.1文档结构

1.4.2基本形状

1.4.3指定样式属性

1.4.4图形对象分组

1.4.5变换坐标系统

1.4.6其他基本图形

1.4.7路径

1.4.8文本

第2章 在网页中使用SVG

2.1将SVG作为图像

2.1.1在<img>元素内包含SVG

2.1.2在CSS中包含SVG

2.2将SVG作为应用程序

2.3混合文档中的SVG标记

2.3.1 SVG中的foreign object

2.3.2在XHTML或者HTML5中内联SVG

2.3.3其他XML应用程序中的SVG

第3章 坐标系统

3.1视口

3.2使用默认用户坐标

3.3为视口指定用户坐标

3.4保留宽高比

3.4.1为preserveAspectRatio指定对齐方式

3.4.2使用meet说明符

3.4.3使用slice说明符

3.4.4使用none说明符

3.5嵌套坐标系统

第4章 基本形状

4.1线段

4.2笔画特性

4.2.1 stroke-width

4.2.2笔画颜色

4.2.3 stroke-opacity

4.2.4 stroke-dasharray属性

4.3矩形

4.4圆和椭圆

4.5多边形

4.6折线

4.7线帽和线连接

4.8基本形状总结

4.8.1形状元素

4.8.2指定颜色

4.8.3笔画和填充特性

第5章 文档结构

5.1结构和表现

5.2在SVG中使用样式

5.2.1内联样式

5.2.2内部样式表

5.2.3外部样式表

5.2.4表现属性

5.3分组和引用对象

5.3.1 <g>元素

5.3.2 <use>元素

5.3.3 <defs>元素

5.3.4 <symbol>元素

5.3.5 <image>元素

第6章 坐标系统变换

6.1 translate变换

6.2 scale变换

6.3变换序列

6.4技巧：笛卡儿坐标系统转换

6.5 rotate变换

6.6技巧：围绕中心点缩放

6.7 skewX和skewY变换

6.8变换总结

6.9 CSS变换和SVG

第7章 路径

7.1 moveto、 lineto和closepath

7.2相对moveto和lineto

7.3路径的快捷方式

7.3.1水平和垂直lineto命令

7.3.2路径快捷方式表示法

7.4椭圆弧

7.5从其他弧线格式转换

7.6贝塞尔曲线

7.6.1二次贝塞尔曲线

7.6.2三次贝塞尔曲线

7.7路径总结

7.8路径和填充

7.9 <marker>元素

7.10标记记录

第8章 图案和渐变

8.1图案

8.1.1 patternUnits

8.1.2 patternContentUnits

8.1.3图案嵌套

8.2渐变

8.2.1 linearGradient元素

8.2.2 radialGradient元素

8.2.3渐变总结

8.3变换图案和渐变

第9章 文本

9.1文本的相关术语

9.2 <text>元素的基本属性

9.3文本对齐

9.4 <tspan>元素

9.5设置文本长度

9.6纵向文本

9.7国际化和文本

9.7.1 Unicode和双向语言

9.7.2 <switch>元素

9.7.3使用自定义字体

9.8文本路径

9.9空白和文本

9.10案例学习：为图形添加文本

第10章 裁剪和蒙版

10.1裁剪路径

10.2蒙版

10.3案例学习：为图形应用蒙版

第11章 滤镜

11.1滤镜的工作原理

11.2创建投影效果

11.2.1建立滤镜的边界

11.2.2投影<feGaussianBlur>

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

11.3创建发光式投影

11.3.1 <feColorMatrix>元素

11.3.2 <feColorMatrix>详解

11.4 <feImage>滤镜

11.5 <feComponentTransfer>滤镜

11.6 <feComposite>滤镜

11.7 <feBlend>滤镜

11.8 <feFlood>和<feTile>滤镜

11.9光照效果

11.9.1漫反射照明

11.9.2镜面反射照明

11.10访问背景

11.11 <feMorphology>元素

11.12 <feConvolveMatrix>元素

11.13 <feDisplacementMap>元素

11.14 <feTurbulence>元素

11.15 滤镜总结

第12章 SVG动画

12.1动画基础

12.2动画时间详解

12.3同步动画

12.4重复动作

12.5对复杂的属性应用动画

12.6指定多个值

12.7多级动画时间

12.8 <set>元素

12.9 <animateTransform>元素

12.10 <animateMotion>元素

12.11为运动指定关键点和时间

12.12使用CSS处理SVG动画

12.12.1动画属性

12.12.2设置动画关键帧

12.12.3 CSS中的动画运动

第13章 添加交互

13.1在SVG中使用链接

13.2控制CSS动画

13.3用户触发的SMIL动画

13.4使用脚本控制SVG

13.4.1事件概览

13.4.2监听和响应事件

13.4.3修改多个对象的属性

13.4.4拖拽对象

13.4.5与HTML页面交互

13.4.6创建新元素

第14章 使用SVG DOM

14.1确定元素的属性值

14.2 SVG接口方法

14.3使用ECMAScript/JavaScript创建SVG

14.4使用脚本控制动画

14.5使用JavaScript库

14.6 Snap中的事件处理

14.6.1点击对象

14.6.2拖拽对象

第15章 生成SVG

15.1将自定义数据转换为SVG

15.2使用XSLT将XML数据转换为SVG

15.2.1定义任务

15.2.2 XSLT的工作方式

15.2.3编写XSL样式表

附录A SVG中需要的XML知识

附录B 样式表介绍

附录C 编程概念

附录D 矩阵代数

附录E 创建字体

附录F 将圆弧转换为不同的格式

SVG精髓 第2版 精彩文摘

首先需要注意的是 rect 元素不再是一个空元素，它里面包含了动画元素。

animate 元素指定了下列信息。

attributeNane，动画中应该持续改变的值；在这里就是width。

attribukType。width属性是一个XML属性。另一个常用的attributeType值是CSS，表示我们想要改变的属性是一个CSS属性。如果忽略这一属性，它的默认值是auto，它首先会搜索CSS属性，然后才是XML属性。

属性的起始（from）和结束（to）值。在这个例子中，起始值是200，结束值是20。from值是可选的；如果不指定，则会使用父元素的值。此外，还有一个by属性，可以代替to，它是一个从from值开始的偏移量；动画结束时属性的值为结束值。

动画的开始时间和持续时间。在这个例子中，时间以秒为单位，通过在数字后面使用s指定。定义时间的其他方式会在12.2节中描述。

动画结束时做什么。在这个例子中，持续5秒之后，属性会“冻结”（freeze）为to值。也就是SMIL fill属性，它会告诉动画引擎如何填补剩下的时间。不要把它跟SVG的fill属性混淆了，该属性用于告诉SVG如何描绘对象。如果我们移除这一行，会使用默认值（remove），5秒的动画完成之后width属性会返回它的原始值200。

图12—1和图12—2展示了动画的开始和结束阶段。它们并不能很好地展示实际效果，因此我们强烈建议你在浏览器中试试。