为了账号安全,请及时绑定邮箱和手机立即绑定

走进SVG

难度中级
时长 4小时56分
学习人数
综合评分9.6
33人评价 查看评价
10.0 内容实用
9.4 简洁易懂
9.3 逻辑清晰
简介:SVG 是 HTML5 中矢量图的标记语言,它保持了强大的绘图能力的同时,具有非常高端的使用接口,通过直接操作 Dom 节点的形式来操作图形。本课程意在让学生掌握 SVG 这门语言和它对应的一些 API,再结合2D绘图的知识,让学生具有对页面复杂图形的渲染和控制能力。

1章 SVG 入门

介绍 SVG 的技术背景,介绍 SVG 的使用方法、基本图形、基本属性以及基本编程接口,让观众对 SVG 有一个大概的了解,并且通过一个综合的例子「SVG 编辑器」将本章知识点串联起来。
  1. 1-1 SVG简介 (06:40)
  2. 1-2 SVG的图形和属性 (05:46)
  3. 1-3 基本操作API (03:23)
  4. 1-4 综合实例:SVG编辑器 (14:21)
  5. 1-5 本章总结 (01:30)

2章 SVG 中的坐标系统

让学生理解 SVG 中的坐标系统的概念。分别讲述视窗和视野的概念、使用 <g> 标签进行图形分组、以及坐标系和坐标变换的概念及应用。
  1. 2-1 SVG-视野的概念 (12:14)
  2. 2-2 SVG-分组的概念 (03:44)
  3. 2-3 SVG-坐标系统概述 (02:19)
  4. 2-4 SVG-四个坐标系 (09:54)
  5. 2-5 SVG-坐标变换 (17:32)

3章 颜色、渐变和笔刷

讲述在 SVG 中如何使用颜色、渐变以及笔刷进行丰富的填充和描边。
  1. 3-1 SVG-RGB和HSL (06:38)
  2. 3-2 SVG-线性渐变和径向渐变 (07:53)
  3. 3-3 SVG-使用笔刷 (06:49)

4章 Path 高级教程

讲述使用 Path 进行任意图形绘制的命令格式,介绍贝塞尔曲线的概念。然后简单介绍如何把任意 Path 转换成贝塞尔曲线之后制作图形补间。
  1. 4-1 Path概述 (05:16)
  2. 4-2 移动和直线命令 (06:04)
  3. 4-3 弧线命令 (10:13)
  4. 4-4 贝塞尔曲线命令(C、Q) (12:14)
  5. 4-5 光滑贝塞尔曲线命令(T、S) (07:00)
  6. 4-6 回顾与思考 (01:55)

6章 图形引用、裁切和蒙版

介绍在 SVG 中如何引用其它图形作为替身,如何用裁剪和蒙版做出更高级的图形效果。
  1. 6-1 use标签创建图形引用 (12:31)
  2. 6-2 clip标签裁切图形 (09:55)
  3. 6-3 mask标签创建蒙版 (11:19)
  4. 6-4 总结 (01:57)

7章 SVG 动画

介绍一下动画的基本概念,以及在 SVG 中创建动画的两种方式。使用一个引人入胜的例子来介绍。
  1. 7-1 SVG-动画原理 (04:21)
  2. 7-2 SVG-基本动画和变换动画 (18:08)
  3. 7-3 SVG-轨迹移动 (06:13)
  4. 7-4 SVG-力导向图 (22:15)

8章 总结

本章主要对我们的正门课程的知识点做一个总结,帮助大家梳理一下整个课程
  1. 8-1 总结 (02:13)
课程须知
1.具备HTML+CSS知识基础;2.对CSS3有一定了解;3.具备一定JS的知识
老师告诉你能学到什么?
让学生能熟悉使用 SVG 在实际的 Web 项目中进行一些 2D 绘图、特效的开发。
意见反馈 常见问题 APP下载
官方微信
hv128