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

走进SVG

难度中级
时长 4小时56分
学习人数
综合评分9.5
31人评价 查看评价
10.0 内容实用
9.4 简洁易懂
9.3 逻辑清晰
简介: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章 总结

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