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

走进SVG

学习人数
难度级别 高级
课程时长 4小时56分
综合评分 9.6
21人评价 查看评价
10.0 内容实用
9.1 简洁易懂
9.5 逻辑清晰

简介:SVG 是 HTML5 中矢量图的标记语言,它保持了强大的绘图能力的同时,具有非常高端的使用接口,通过直接操作 Dom 节点的形式来操作图形。本课程意在让学生掌握 SVG 这门语言和它对应的一些 API,再结合2D绘图的知识,让学生具有对页面复杂图形的渲染和控制能力。

第1章 SVG 入门
介绍 SVG 的技术背景,介绍 SVG 的使用方法、基本图形、基本属性以及基本编程接口,让观众对 SVG 有一个大概的了解,并且通过一个综合的例子「SVG 编辑器」将本章知识点串联起来。

第2章 SVG 中的坐标系统
让学生理解 SVG 中的坐标系统的概念。分别讲述视窗和视野的概念、使用 <g> 标签进行图形分组、以及坐标系和坐标变换的概念及应用。

第3章 颜色、渐变和笔刷
讲述在 SVG 中如何使用颜色、渐变以及笔刷进行丰富的填充和描边。

第4章 Path 高级教程
讲述使用 Path 进行任意图形绘制的命令格式,介绍贝塞尔曲线的概念。然后简单介绍如何把任意 Path 转换成贝塞尔曲线之后制作图形补间。

第6章 图形引用、裁切和蒙版
介绍在 SVG 中如何引用其它图形作为替身,如何用裁剪和蒙版做出更高级的图形效果。

第7章 SVG 动画
介绍一下动画的基本概念,以及在 SVG 中创建动画的两种方式。使用一个引人入胜的例子来介绍。

第8章 总结
本章主要对我们的正门课程的知识点做一个总结,帮助大家梳理一下整个课程

讲师提示

techird JS工程师
课程须知
1.具备HTML+CSS知识基础;2.对CSS3有一定了解;3.具备一定JS的知识
老师告诉你能学到什么?
让学生能熟悉使用 SVG 在实际的 Web 项目中进行一些 2D 绘图、特效的开发。
意见反馈 常见问题 APP下载
官方微信