簡(jiǎn)介:SVG 是 HTML5 中矢量圖的標(biāo)記語(yǔ)言,它保持了強(qiáng)大的繪圖能力的同時(shí),具有非常高端的使用接口,通過(guò)直接操作 Dom 節(jié)點(diǎn)的形式來(lái)操作圖形。本課程意在讓學(xué)生掌握 SVG 這門(mén)語(yǔ)言和它對(duì)應(yīng)的一些 API,再結(jié)合2D繪圖的知識(shí),讓學(xué)生具有對(duì)頁(yè)面復(fù)雜圖形的渲染和控制能力。
第1章 SVG 入門(mén)
介紹 SVG 的技術(shù)背景,介紹 SVG 的使用方法、基本圖形、基本屬性以及基本編程接口,讓觀眾對(duì) SVG 有一個(gè)大概的了解,并且通過(guò)一個(gè)綜合的例子「SVG 編輯器」將本章知識(shí)點(diǎn)串聯(lián)起來(lái)。
第2章 SVG 中的坐標(biāo)系統(tǒng)
讓學(xué)生理解 SVG 中的坐標(biāo)系統(tǒng)的概念。分別講述視窗和視野的概念、使用 <g> 標(biāo)簽進(jìn)行圖形分組、以及坐標(biāo)系和坐標(biāo)變換的概念及應(yīng)用。
第3章 顏色、漸變和筆刷
講述在 SVG 中如何使用顏色、漸變以及筆刷進(jìn)行豐富的填充和描邊。
第4章 Path 高級(jí)教程
講述使用 Path 進(jìn)行任意圖形繪制的命令格式,介紹貝塞爾曲線的概念。然后簡(jiǎn)單介紹如何把任意 Path 轉(zhuǎn)換成貝塞爾曲線之后制作圖形補(bǔ)間。
第5章 SVG 文本
介紹 SVG 中文本的使用、定位,路徑文本的使用。順便介紹在 SVG 中使用超鏈接的方法。
第6章 圖形引用、裁切和蒙版
介紹在 SVG 中如何引用其它圖形作為替身,如何用裁剪和蒙版做出更高級(jí)的圖形效果。
第7章 SVG 動(dòng)畫(huà)
介紹一下動(dòng)畫(huà)的基本概念,以及在 SVG 中創(chuàng)建動(dòng)畫(huà)的兩種方式。使用一個(gè)引人入勝的例子來(lái)介紹。
第8章 總結(jié)
本章主要對(duì)我們的正門(mén)課程的知識(shí)點(diǎn)做一個(gè)總結(jié),幫助大家梳理一下整個(gè)課程