dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1337|回复: 11

[前端] TL SVG精髓(第2版)

[复制链接]
  • TA的每日心情
    奋斗
    2023-5-5 00:22
  • 签到天数: 32 天

    [LV.5]常住居民I

    307

    主题

    280

    帖子

    1284

    积分

    荣誉会员

    积分
    1284

    发表于 2022-8-5 00:00:01 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    1.png

    前言.........................................................................................................................................................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


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

    温馨提示:
    1、本站所有内容均为互联网收集或网友分享或网络购买,本站不破解、不翻录任何视频!
    2、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意!
    3、本站资源仅供本站会员学习参考,不得传播及用于其他用途,学习完后请在24小时内自行删除.
    4、本站资源质量虽均经精心审查,但也难保万无一失,若发现资源有问题影响学习请一定及时点此进行问题反馈,我们会第一时间改正!
    5、若发现链接失效了请联系管理员,管理员会在2小时内修复
    6、如果有任何疑问,请加客服QQ:1300822626 2小时内回复你!
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-6-15 14:54
  • 签到天数: 53 天

    [LV.5]常住居民I

    0

    主题

    142

    帖子

    518

    积分

    技冠群雄

    Rank: 6Rank: 6

    积分
    518

    发表于 2022-8-5 08:05:32 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 09:36
  • 签到天数: 946 天

    [LV.10]以坛为家III

    0

    主题

    2769

    帖子

    7944

    积分

    深不可测

    Rank: 9Rank: 9Rank: 9

    积分
    7944

    发表于 2022-8-5 09:23:59 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    昨天 08:55
  • 签到天数: 824 天

    [LV.10]以坛为家III

    0

    主题

    4168

    帖子

    1万

    积分

    超凡入圣

    Rank: 10Rank: 10Rank: 10

    积分
    10787

    发表于 2022-8-5 14:58:54 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    昨天 20:03
  • 签到天数: 1299 天

    [LV.10]以坛为家III

    1

    主题

    4727

    帖子

    1万

    积分

    超凡入圣

    Rank: 10Rank: 10Rank: 10

    积分
    13040

    发表于 2022-8-6 03:51:17 | 显示全部楼层
    正需要,支持楼主大人了!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 22:48
  • 签到天数: 894 天

    [LV.10]以坛为家III

    1

    主题

    4718

    帖子

    1万

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    11849

    发表于 2022-8-6 23:15:16 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    擦汗
    昨天 11:41
  • 签到天数: 482 天

    [LV.9]以坛为家II

    0

    主题

    1285

    帖子

    4027

    积分

    傲视群雄

    Rank: 8Rank: 8

    积分
    4027

    发表于 2022-8-7 07:29:11 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    昨天 16:27
  • 签到天数: 959 天

    [LV.10]以坛为家III

    4

    主题

    2343

    帖子

    7852

    积分

    深不可测

    Rank: 9Rank: 9Rank: 9

    积分
    7852

    发表于 2022-8-7 14:37:22 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2024-12-8 18:56
  • 签到天数: 179 天

    [LV.7]常住居民III

    0

    主题

    274

    帖子

    1035

    积分

    技冠群雄

    Rank: 6Rank: 6

    积分
    1035

    发表于 2022-8-8 08:42:13 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    7 天前
  • 签到天数: 161 天

    [LV.7]常住居民III

    0

    主题

    751

    帖子

    2205

    积分

    一代宗师

    Rank: 7Rank: 7Rank: 7

    积分
    2205

    发表于 2024-1-11 22:21:47 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-12-24 00:18 , Processed in 0.390224 second(s), 41 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表