HTML5 SVG入门文本动画视频教程

源码小哥哥

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

课程须知:
1.具备HTML+CSS知识基础；2.对CSS3有一定了解；3.具备一定JS的知识

课程能学到什么？
让学生能熟悉使用 SVG 在实际的 Web 项目中进行一些 2D 绘图、特效的开发。

课程目录:
第1章 SVG 入门
介绍 SVG 的技术背景，介绍 SVG 的使用方法、基本图形、基本属性以及基本编程接口，让观众对 SVG 有一个大概的了解，并且通过一个综合的例子「SVG 编辑器」将本章知识点串联起来。
1-1 SVG简介 (06:40)
1-2 SVG的图形和属性 (05:46)
1-3 基本操作API (03:23)
1-4 综合实例：SVG编辑器 (14:21)
1-5 本章总结 (01:30)
第2章 SVG 中的坐标系统
让学生理解 SVG 中的坐标系统的概念。分别讲述视窗和视野的概念、使用  标签进行图形分组、以及坐标系和坐标变换的概念及应用。
2-1 SVG-视野的概念 (12:14)
2-2 SVG-分组的概念 (03:44)
2-3 SVG-坐标系统概述 (02:19)
2-4 SVG-四个坐标系 (09:54)
2-5 SVG-坐标变换 (17:32)
第3章 颜色、渐变和笔刷
讲述在 SVG 中如何使用颜色、渐变以及笔刷进行丰富的填充和描边。
3-1 SVG-RGB和HSL (06:38)
3-2 SVG-线性渐变和径向渐变 (07:53)
3-3 SVG-使用笔刷 (06:49)
第4章 Path 高级教程
讲述使用 Path 进行任意图形绘制的命令格式，介绍贝塞尔曲线的概念。然后简单介绍如何把任意 Path 转换成贝塞尔曲线之后制作图形补间。
4-1 Path概述 (05:16)
4-2 移动和直线命令 (06:04)
4-3 弧线命令 (10:13)
4-4 贝塞尔曲线命令（C、Q） (12:14)
4-5 光滑贝塞尔曲线命令（T、S） (07:00)
4-6 回顾与思考 (01:55)
第5章 SVG 文本
介绍 SVG 中文本的使用、定位，路径文本的使用。顺便介绍在 SVG 中使用超链接的方法。
5-1 SVG-、 以及其属性 (14:26)
5-2 SVG-利用 dy 属性实现波浪文字效果 (13:36)
5-3 SVG-垂直居中问题 (08:44)
5-4 SVG-路径文本 (13:33)
5-5 SVG-使用脚本控制路径文本 (12:37)
5-6 使用超链接 (02:28)
第6章 图形引用、裁切和蒙版
介绍在 SVG 中如何引用其它图形作为替身，如何用裁剪和蒙版做出更高级的图形效果。
6-1 use标签创建图形引用 (12:31)
6-2 clip标签裁切图形 (09:55)
6-3 mask标签创建蒙版 (11:19)
6-4 总结 (01:57)
第7章 SVG 动画
介绍一下动画的基本概念，以及在 SVG 中创建动画的两种方式。使用一个引人入胜的例子来介绍。
7-1 SVG-动画原理 (04:21)
7-2 SVG-基本动画和变换动画 (18:08)
7-3 SVG-轨迹移动 (06:13)
7-4 SVG-力导向图 (22:15)
第8章 总结
本章主要对我们的正门课程的知识点做一个总结，帮助大家梳理一下整个课程
8-1 总结 (02:13)

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

只是牧羊犬

第三方水电费水电费水电费

sipkoy

不错的教程 感谢楼主分享 值得学习HTML5

wsyxzxs

不错的教程  值得学习HTML5

1123988589

很符合符合规范规划

addin

水电费水电费发的s

paopaoyu815914

HTML5 SVG入门文本动画视频教程

hadhm

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

chcchb

QWERQWEQERQWERQWER

dushun

hjgfjfghjfghjghjfgjfgjfghj