SVG精髓 第2版 内容简介

SVG精髓 第2版 内容简介

SVG精髓 第2版 目录

SVG精髓 第2版 精彩文摘

《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（可缩放矢量图形）这种标记语言的规范及应用。作者从简单的SVG应用开始，带领读者逐步探索了SVG的复杂功能，包括滤镜、变换、渐变和模式。从应用层面看，本书涵盖了动画、交互图形和动态SVG编程等技术，不仅能为有经验的开发人员提供重要参考，同时通过讲解基本的XML和CSS技术，为没有Web开发经验的读者提供了入门捷径。第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章 在网页中使用SVG2.1将SVG作为图像2.1.1在元素内包含SVG2.1.2在CSS中包含SVG2.2将SVG作为应用程序2.3混合文档中的SVG标记2.3.1 SVG中的foreign object2.3.2在XHTML或者HTML5中内联SVG2.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-width4.2.2笔画颜色4.2.3 stroke-opacity4.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 元素5.3.2 元素5.3.3 元素5.3.4 元素5.3.5 元素第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和closepath7.2相对moveto和lineto7.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 元素7.10标记记录第8章 图案和渐变8.1图案8.1.1 patternUnits8.1.2 patternContentUnits8.1.3图案嵌套8.2渐变8.2.1 linearGradient元素8.2.2 radialGradient元素8.2.3渐变总结8.3变换图案和渐变第9章 文本9.1文本的相关术语9.2 元素的基本属性9.3文本对齐9.4 元素9.5设置文本长度9.6纵向文本9.7国际化和文本9.7.1 Unicode和双向语言9.7.2 元素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投影11.2.3存储、链接以及合并滤镜结果11.3创建发光式投影11.3.1 元素11.3.2 详解11.4 滤镜11.5 滤镜11.6 滤镜11.7 滤镜11.8 和滤镜11.9光照效果11.9.1漫反射照明11.9.2镜面反射照明11.10访问背景11.11 元素11.12 元素11.13 元素11.14 元素11.15 滤镜总结第12章 SVG动画12.1动画基础12.2动画时间详解12.3同步动画12.4重复动作12.5对复杂的属性应用动画12.6指定多个值12.7多级动画时间12.8 元素12.9 元素12.10 元素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使用脚本控制SVG13.4.1事件概览13.4.2监听和响应事件13.4.3修改多个对象的属性13.4.4拖拽对象13.4.5与HTML页面交互13.4.6创建新元素第14章 使用SVG DOM14.1确定元素的属性值14.2 SVG接口方法14.3使用ECMAScript/JavaScript创建SVG14.4使用脚本控制动画14.5使用JavaScript库14.6 Snap中的事件处理14.6.1点击对象14.6.2拖拽对象第15章 生成SVG15.1将自定义数据转换为SVG15.2使用XSLT将XML数据转换为SVG15.2.1定义任务15.2.2 XSLT的工作方式15.2.3编写XSL样式表附录A SVG中需要的XML知识附录B 样式表介绍附录C 编程概念附录D 矩阵代数附录E 创建字体附录F 将圆弧转换为不同的格式首先需要注意的是 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展示了动画的开始和结束阶段。它们并不能很好地展示实际效果，因此我们强烈建议你在浏览器中试试。