TL SVG精髓(第2版)
前言.........................................................................................................................................................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
目录 ｜ vii
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
viii ｜ 目录
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
目录 ｜ ix
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
x ｜ 目录
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
目录 ｜ xi
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
**** Hidden Message *****
啥也不说了，感谢楼主分享哇！ 啥也不说了，感谢楼主分享哇！ 啥也不说了，感谢楼主分享哇！ 正需要，支持楼主大人了！ 啥也不说了，感谢楼主分享哇！ 啥也不说了，感谢楼主分享哇！ 啥也不说了，感谢楼主分享哇！ 啥也不说了，感谢楼主分享哇！ 啥也不说了，感谢楼主分享哇！
页:
[1]
2