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

游客，如果您要查看本帖隐藏内容请回复

894238940

啥也不说了，感谢楼主分享哇！

daoxingwudao

啥也不说了，感谢楼主分享哇！

bai615

啥也不说了，感谢楼主分享哇！

李才哥

正需要，支持楼主大人了！

17770767379

啥也不说了，感谢楼主分享哇！

kingdee

啥也不说了，感谢楼主分享哇！

neun

啥也不说了，感谢楼主分享哇！

fengxie

啥也不说了，感谢楼主分享哇！

xf111

啥也不说了，感谢楼主分享哇！