HTML第7章-HTML5的SVG繪圖課件

1、第7章 HTML5的SVG繪圖SVG概述1繪制SVG基本圖形2變換3組合與重用4漸變與透明度5濾鏡67.1 SVG概述1SVG優(yōu)缺點(diǎn)(1)SVG繪圖優(yōu)點(diǎn)圖形文件可使用任何文本編輯器創(chuàng)建，可讀性強(qiáng)，易于修改。與現(xiàn)有技術(shù)可以互動(dòng)融合，可通過JS腳本來控制SVG對(duì)象。SVG圖形格式方便建立文字索引，實(shí)現(xiàn)基于內(nèi)容的圖像搜索。SVG圖形可被高質(zhì)量地打印。SVG圖形格式支持多種濾鏡和特殊效果，在不改變圖像內(nèi)容的前提下可以實(shí)現(xiàn)位圖格式中類似文字陰影的效果。SVG圖形格式可以用來動(dòng)態(tài)生成圖形。例如，可以SVG動(dòng)態(tài)生成具有交互功能的地圖，嵌入網(wǎng)頁(yè)中，并顯示在客戶端。7.1 SVG概述SVG只在某些領(lǐng)域具有很高的

2、使用價(jià)值，它存在缺點(diǎn)。(2) SVG繪圖缺點(diǎn)使用廣泛性不如Flash。SVG本地運(yùn)行環(huán)境下的廠家支持程度有待提高。由于原始的SVG文件是遵從XML語法，導(dǎo)致數(shù)據(jù)采用壓縮的方式存放，因此相較于其他的矢量圖形格式，同樣的文件內(nèi)容會(huì)比其他的文件格式稍大。舊版的SVG Viewer無法正確顯示出使用新版SVG格式的矢量圖形。7.1 SVG概述(3)SVG繪圖與canvas繪圖的區(qū)別canvasSVGcanvas通過JS來繪制2D圖形SVG是使用XML描述2D圖形的語言canvas是逐像素進(jìn)行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景

3、也需要重新繪制，包括已被圖形覆蓋的對(duì)象。在SVG中，每個(gè)被繪制的圖形均被視為對(duì)象。如果SVG對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。依賴分辨率不依賴分辨率不支持事件處理支持事件處理弱的文本渲染能力最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）能夠以 .png 或 .jpg 格式保存結(jié)果圖像復(fù)雜度高會(huì)減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快）最適合圖像密集型的游戲，其中的許多對(duì)象會(huì)被頻繁重繪不適合游戲應(yīng)用表7-1 canvas和SVG的不同點(diǎn)對(duì)照表7.1 SVG概述2 SVG調(diào)用方式(1) 嵌入svg元素 直接在HTML頁(yè)面中嵌入svg元素。svg元素包括開始標(biāo)記和結(jié)束標(biāo)記，使

4、用width和height屬性設(shè)置svg元素的寬度和高度。 7.1 SVG概述(2)引用外部SVG文件 也可以通過img、embed、iframe等元素，在HTML中引用外部SVG文件。在HTML中調(diào)用外部SVG文件的語法格式如下:7.1 SVG概述(2)引用外部SVG文件示例7-1第一部分是一個(gè)SVG文件7.2 繪制SVG基本圖形1繪制矩形和直線(1)繪制矩形rect元素用來創(chuàng)建矩形及其各種變化。7.2 繪制SVG基本圖形(2)繪制直線 line元素用來創(chuàng)建直線，這個(gè)直線實(shí)際是線段（線條），需要定義起點(diǎn)和終點(diǎn)，語法格式如下。7.2 繪制SVG基本圖形2繪制圓和橢圓(1) 繪制圓形 circl

5、e元素可用來創(chuàng)建一個(gè)圓. 其中，r為圓的半徑，cx、cy是圓心的橫坐標(biāo)和縱坐標(biāo)，style用于定義圓的樣式。7.2 繪制SVG基本圖形(2)繪制橢圓ellipse元素可用來創(chuàng)建橢圓，繪制橢圓的語法格式如下：橢圓與圓屬性的不同之處在于橫軸半徑rx和縱軸半徑ry，而圓形只有半徑r。7.2 繪制SVG基本圖形3繪制折線和多邊形(1)繪制折線 polyline元素可創(chuàng)建僅包含直線的形狀. 折線主要定義每條線段的端點(diǎn)即可，所以只需要一個(gè)點(diǎn)的集合points作為參數(shù)。points是一系列用空格，逗號(hào)，換行符等分隔開的點(diǎn)。7.2繪制SVG基本圖形(2)繪制多邊形polygon元素用來創(chuàng)建含有不少于三個(gè)邊的圖

6、形。7.2 繪制SVG基本圖形4繪制路徑 path元素用來定義路徑,命令和參數(shù)如下。命令含義參數(shù)說明Mmovetox,y將畫筆移動(dòng)到點(diǎn)(x,y)Llinetox,y畫筆從當(dāng)前的點(diǎn)繪制線段到點(diǎn)(x,y)Hhorizontal linetox從當(dāng)前的點(diǎn)繪制水平線段到點(diǎn)(x,y0)Vvertical linetoy從當(dāng)前的點(diǎn)繪制豎直線段到點(diǎn)(x0,y)Aelliptical Arcrx, ry x-axis-rotation large-arc-flag sweep-flag x y畫筆從當(dāng)前的點(diǎn)繪制一段圓弧到點(diǎn)(x,y)Ccurvetox1, y1,x2 y2,x y畫筆從當(dāng)前的點(diǎn)繪制一段三次貝塞

7、爾曲線到點(diǎn)(x,y)Ssmooth curvetox2 y2,x y特殊版本的三次貝塞爾曲線(省略第一個(gè)控制點(diǎn))Qquadratic Belzier curvex1 y1,x y繪制二次貝塞爾曲線到點(diǎn)(x,y)Tsmooth quadratic Belzierx y特殊版本的二次貝塞爾曲線(省略控制點(diǎn))Zclosepath無參數(shù)繪制閉合圖形，如果d屬性不指定Z命令，則繪制線段，而不是封閉圖形。7.2 繪制SVG基本圖形5繪制文本和圖形(1)SVG繪制文本SVG中，使用text元素輸出文本.7.2 繪制SVG基本圖形5繪制文本和圖形(2)SVG顯示圖形SVG使用image元素顯示外部圖片，其語法

8、格式如下：示例7-2分別使用不同的標(biāo)簽，繪制了多個(gè)圖形7.2繪制SVG基本圖形5SVG繪圖的屬性(1)fill屬性用于設(shè)置圖形內(nèi)部的填充顏色，直接將顏色值賦給該屬性即可。例如， fill= yellow;(2)stroke屬性用于設(shè)置繪制圖形的邊框顏色，直接為其賦顏色值即可。例如， stroke= #f00;7.2 繪制SVG基本圖形5SVG繪圖的屬性(3)stroke-width屬性用于定義圖形邊框的寬度，默認(rèn)1像素，數(shù)值越大，邊框越粗。例如，stroke-width=rgb(100%,50%,50%);(4)stroke-linecap屬性定義線段端點(diǎn)的風(fēng)格，即線帽的形狀。(5) stro

9、ke-linejoin屬性該屬性定義了線段連接處的風(fēng)格。(6) stroke-dasharray屬性stroke-dasharray屬性用于繪制虛實(shí)線，其格式如下。stroke-dasharray=value,value,7.2 繪制SVG基本圖形5SVG繪圖的屬性7.3 變換1平移 使用translate方法，可以移動(dòng)坐標(biāo)軸原點(diǎn)。 transform= translate(,);2旋轉(zhuǎn) 使用rotate方法，可以定義目標(biāo)對(duì)象繞某點(diǎn)旋轉(zhuǎn)一定的角度。transform=rotate(,);7.3 變換3縮放使用scale方法，可以縮放圖形元素的尺寸。 transform=scale(,);4傾斜

10、使用一個(gè)或多個(gè)傾斜方法skewX和skewY，可以對(duì)SVG元素進(jìn)行傾斜定義。 transform=skewX(); transform=skewY();7.3 變換示例7-4，首先定義了1個(gè)矩形，然后對(duì)其進(jìn)行了3次圖形變換。7.4 組合與重用1g元素 g元素是一種把相關(guān)元素進(jìn)行組合的容器元素。在和標(biāo)記之間定義一組圖形元素，這些圖形就成為一個(gè)整體，既可以使文檔結(jié)構(gòu)清晰，又方便用戶對(duì)組合元素進(jìn)行操作。示例7-5使用g元素定義了3個(gè)圖形組合7.4 組合與重用2use元素SVG使用use元素，為定義在g元素內(nèi)的組合或者任意獨(dú)立圖形元素提供類似復(fù)制粘貼的功能。要實(shí)現(xiàn)如圖7-6所示效果，只要將下面3行代碼

11、寫在上一小節(jié)示例代碼的SVG結(jié)束標(biāo)記之前即可。7.4 組合與重用3defs元素通過在起始和結(jié)束標(biāo)記之間放置這些組合對(duì)象，定義將來使用的內(nèi)容，這時(shí)只定義但并不顯示它們。需要的時(shí)候，使用use元素將defs元素定義的內(nèi)容鏈接到需要的地方。通過這兩個(gè)元素，可以多次重用同一內(nèi)容，消除冗余。示例7-6使用defs元素和g元素定義了house、man、woman三個(gè)圖形組合7.5 漸變與透明度1漸變（1）線性漸變線性漸變就是一系列顏色沿著一條直線過渡。示例7-7定義了3種線性漸變效果。7.5 漸變與透明度1漸變（1）線性漸變示例7-8定義了線性漸變Grad1，顏色由黑黃紅組成。7.5 漸變與透明度1漸變（

12、2）徑向漸變徑向漸變的每個(gè)漸變點(diǎn)表示一個(gè)圓形路徑，從中心點(diǎn)向外擴(kuò)散。定義徑向漸變的語法格式如下：示例7-9演示了徑向漸變7.5 漸變與透明度1漸變（2）徑向漸變示例7-10定義了三種徑向漸變顏色延展的效果7.5 漸變與透明度2透明度 SVG使用opacity屬性定義整個(gè)元素的透明度，使用fill-opacity屬性為填充（fill屬性）設(shè)置透明度，使用stroke-opacity屬性為邊框（stroke屬性）設(shè)置透明度，這些透明度取值范圍都是0到1之間。示例7-11中繪制了透明度效果。7.6 濾鏡1濾鏡的定義 SVG的濾鏡效果使用filter元素定義，在需要濾鏡效果的圖形或容器上添加filter:url屬性，引用定義好的濾鏡即可。標(biāo)記必須定義在標(biāo)記內(nèi)，需要定義id名稱來標(biāo)識(shí)濾鏡。 在圖形或容器上引用濾鏡的語法格式如下： 7.6 濾鏡2濾鏡的應(yīng)用（1） 高斯模糊濾鏡feGaussianBlur濾鏡的定義格式如下。示例7-12定義了高斯模糊的濾鏡效果7.6 濾鏡2濾鏡的應(yīng)用