第7章 HTML5的SVG繪圖HTML5與CSS3 Web前端開(kāi)發(fā)技術(shù)-PPT課件

1、HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)第7章 HTML5的SVG繪圖(HTML5與CSS3 Web前端開(kāi)發(fā)技術(shù))HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.1 SVG概述2 SVG調(diào)用方式調(diào)用方式(1) 嵌入嵌入svg元素元素 直接在直接在HTML頁(yè)面中嵌入頁(yè)面中嵌入svg元素。元素。svg元素包括開(kāi)始元素包括開(kāi)始標(biāo)記標(biāo)記和結(jié)束標(biāo)記和結(jié)束標(biāo)記，使用，使用width和和height屬性設(shè)置屬性設(shè)置svg元素

2、的寬度和高度。語(yǔ)法格式如下。元素的寬度和高度。語(yǔ)法格式如下。 HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.1 SVG概述(2)引用外部引用外部SVG文件文件 也可以通過(guò)也可以通過(guò)img、embed、iframe等元素，在等元素，在HTML中引用外部中引用外部SVG文件。文件。在在HTML中調(diào)用外部中調(diào)用外部SVG文文件的語(yǔ)法格式如下件的語(yǔ)法格式如下:HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.1 SVG概述(2)引用外部引用外部SVG文件文件例如例如7-1第一局部是一個(gè)第一局部是一個(gè)SVG文件文件HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.2 繪制繪制

3、SVG根本圖形根本圖形1繪制矩形和直線繪制矩形和直線(1)繪制矩形繪制矩形rect元素用來(lái)創(chuàng)立矩形及其各種變化。元素用來(lái)創(chuàng)立矩形及其各種變化。HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.2 繪制繪制SVG根本圖形根本圖形(2)繪制直線繪制直線 line元素用來(lái)創(chuàng)立直線，這個(gè)直線實(shí)際是線段元素用來(lái)創(chuàng)立直線，這個(gè)直線實(shí)際是線段線條，需要定義起點(diǎn)和終點(diǎn)，語(yǔ)法格式如下。線條，需要定義起點(diǎn)和終點(diǎn)，語(yǔ)法格式如下。HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.2 繪制繪制SVG根本圖形根本圖形2繪制圓和橢圓繪制圓和橢圓(1) 繪制圓形繪制圓形 circle元素可用來(lái)創(chuàng)立一個(gè)圓元素可

4、用來(lái)創(chuàng)立一個(gè)圓. 其中，其中，r為圓的半徑，為圓的半徑，cx、cy是圓心的橫坐標(biāo)是圓心的橫坐標(biāo)和縱坐標(biāo)，和縱坐標(biāo)，style用于定義圓的樣式。用于定義圓的樣式。HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.2 繪制繪制SVG根本圖形根本圖形(2)繪制橢圓繪制橢圓ellipse元素可用來(lái)創(chuàng)立橢圓，繪制橢圓的語(yǔ)法格元素可用來(lái)創(chuàng)立橢圓，繪制橢圓的語(yǔ)法格式如下：式如下：橢圓與圓屬性的不同之處在于橫軸半徑橢圓與圓屬性的不同之處在于橫軸半徑rx和縱軸半和縱軸半徑徑ry，而圓形只有半徑，而圓形只有半徑r。HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.2 繪制繪制SVG根本圖形根本圖形

5、3繪制折線和多邊形繪制折線和多邊形(1)繪制折線繪制折線 polyline元素可創(chuàng)立僅包含直線的形狀元素可創(chuàng)立僅包含直線的形狀. 折線主要定義每條線段的端點(diǎn)即可，所以只需要折線主要定義每條線段的端點(diǎn)即可，所以只需要一個(gè)點(diǎn)的集合一個(gè)點(diǎn)的集合points作為參數(shù)。作為參數(shù)。points是一系列是一系列用空格，逗號(hào)，換行符等分隔開(kāi)的點(diǎn)。用空格，逗號(hào)，換行符等分隔開(kāi)的點(diǎn)。HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)繪制SVG根本圖形(2)繪制多邊形繪制多邊形polygon元素用來(lái)創(chuàng)立含有不少于三個(gè)邊的圖形。元素用來(lái)創(chuàng)立含有不少于三個(gè)邊的圖形。HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)

6、技術(shù)7.2 繪制繪制SVG根本圖形根本圖形4繪制路徑繪制路徑 path元素用來(lái)定義路徑。元素用來(lái)定義路徑。命令命令含義含義參數(shù)參數(shù)說(shuō)明說(shuō)明Mmovetox,y將畫(huà)筆移動(dòng)到點(diǎn)(x,y)Llinetox,y畫(huà)筆從當(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畫(huà)筆從當(dāng)前的點(diǎn)繪制一段圓弧到點(diǎn)(x,y)Ccurvetox1, y1,x2 y2

7、,x y畫(huà)筆從當(dāng)前的點(diǎn)繪制一段三次貝塞爾曲線到點(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無(wú)參數(shù)繪制閉合圖形，如果d屬性不指定Z命令，則繪制線段，而不是封閉圖形。表表7-2 path元素的命令和繪制參數(shù)元素的命令和繪制參數(shù)HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.2 繪制繪制SVG根本圖形根本圖形5繪制文本和圖

8、形繪制文本和圖形(1)SVG繪制文本繪制文本SVG中，使用中，使用text元素輸出文本元素輸出文本.HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.2 繪制繪制SVG根本圖形根本圖形5繪制文本和圖形繪制文本和圖形(2)SVG顯示圖形顯示圖形SVG使用使用image元素顯示外部圖片，其語(yǔ)法格式元素顯示外部圖片，其語(yǔ)法格式如下：如下：例如例如7-2分別使用不同的標(biāo)簽，繪制了多個(gè)圖形分別使用不同的標(biāo)簽，繪制了多個(gè)圖形HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)繪制SVG根本圖形5SVG繪圖的屬性繪圖的屬性(1)fill屬性屬性該屬性用于設(shè)置圖形內(nèi)部的填充顏色，直接將顏色值賦給這該

9、屬性用于設(shè)置圖形內(nèi)部的填充顏色，直接將顏色值賦給這個(gè)屬性即可。例如，個(gè)屬性即可。例如， fill= yellow;(2)stroke屬性屬性該屬性用于設(shè)置繪制圖形的邊框顏色，也是直接為其賦顏色該屬性用于設(shè)置繪制圖形的邊框顏色，也是直接為其賦顏色值即可。例如，值即可。例如， stroke= #f00;HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.2 繪制繪制SVG根本圖形根本圖形5SVG繪圖的屬性繪圖的屬性(3)stroke-width屬性屬性該屬性用于定義圖形邊框的寬度，默認(rèn)為該屬性用于定義圖形邊框的寬度，默認(rèn)為1像素，數(shù)值越大，邊框越粗像素，數(shù)值越大，邊框越粗。例如，。例如，st

10、roke-width=rgb(100%,50%,50%);(4)stroke-linecap屬性屬性該屬性定義了線段端點(diǎn)的風(fēng)格，即線帽的形狀。該屬性定義了線段端點(diǎn)的風(fēng)格，即線帽的形狀。(5) stroke-linejoin屬性屬性該屬性定義了線段連接處的風(fēng)格。該屬性定義了線段連接處的風(fēng)格。(6) stroke-dasharray屬性屬性stroke-dasharray屬性用于繪制虛實(shí)線，其格式如下。屬性用于繪制虛實(shí)線，其格式如下。stroke-dasharray=value,value,HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.2 繪制繪制SVG根本圖形根本圖形5SVG繪圖的屬

11、性繪圖的屬性HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.3 變換1平移平移 使用使用translate方法，可以移動(dòng)坐標(biāo)軸原點(diǎn)。方法，可以移動(dòng)坐標(biāo)軸原點(diǎn)。 transform= translate(,);2旋轉(zhuǎn)旋轉(zhuǎn) 使用使用rotate方法，可以定義目標(biāo)對(duì)象繞某點(diǎn)旋方法，可以定義目標(biāo)對(duì)象繞某點(diǎn)旋轉(zhuǎn)一定的角度。該方法定義格式如下。轉(zhuǎn)一定的角度。該方法定義格式如下。transform=rotate(,);HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.3 變換3縮放縮放使用使用scale方法，可以對(duì)圖形元素的尺寸進(jìn)行縮放方法，可以對(duì)圖形元素的尺寸進(jìn)行縮放。 transfor

12、m=scale(,);4傾斜傾斜使用一個(gè)或多個(gè)傾斜方法使用一個(gè)或多個(gè)傾斜方法skewX和和skewY，可以，可以對(duì)對(duì)SVG元素進(jìn)行傾斜定義。元素進(jìn)行傾斜定義。 transform=skewX(); transform=skewY();HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.3 變換例如例如7-4，首先定義了，首先定義了1個(gè)矩形，然后對(duì)其進(jìn)行了個(gè)矩形，然后對(duì)其進(jìn)行了3次圖形變換。次圖形變換。HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.4 組合與重用1g元素元素 g元素是一種把相關(guān)元素進(jìn)行組合的容器元素。元素是一種把相關(guān)元素進(jìn)行組合的容器元素。在在和和標(biāo)記之間定義一

13、組圖形元素，這標(biāo)記之間定義一組圖形元素，這些圖形就成為一個(gè)整體，既可以使文檔結(jié)構(gòu)清晰，些圖形就成為一個(gè)整體，既可以使文檔結(jié)構(gòu)清晰，又方便用戶對(duì)組合元素進(jìn)行操作。又方便用戶對(duì)組合元素進(jìn)行操作。例如例如7-5使用使用g元素定義了元素定義了3個(gè)圖形組合個(gè)圖形組合HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.4 組合與重用2use元素元素 SVG使用使用use元素，為定義在元素，為定義在g元素內(nèi)的組合或元素內(nèi)的組合或者任意獨(dú)立圖形元素提供類(lèi)似復(fù)制粘貼的功能。者任意獨(dú)立圖形元素提供類(lèi)似復(fù)制粘貼的功能。要實(shí)現(xiàn)如圖要實(shí)現(xiàn)如圖7-6所示效果，只要將下面所示效果，只要將下面3行代碼寫(xiě)行代碼寫(xiě)在上一小

14、節(jié)例如代碼的在上一小節(jié)例如代碼的SVG結(jié)束標(biāo)記結(jié)束標(biāo)記之之前即可。前即可。HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.4 組合與重用3defs元素元素通過(guò)在起始和結(jié)束通過(guò)在起始和結(jié)束標(biāo)記之間放置這些組合標(biāo)記之間放置這些組合對(duì)象，定義將來(lái)使用的內(nèi)容，這時(shí)只定義但并不顯對(duì)象，定義將來(lái)使用的內(nèi)容，這時(shí)只定義但并不顯示它們。需要的時(shí)候，使用示它們。需要的時(shí)候，使用use元素將元素將defs元素定元素定義的內(nèi)容鏈接到需要的地方。通過(guò)這兩個(gè)元素，可義的內(nèi)容鏈接到需要的地方。通過(guò)這兩個(gè)元素，可以屢次重用同一內(nèi)容，消除冗余。以屢次重用同一內(nèi)容，消除冗余。例如例如7-6使用使用defs元素和元素和

15、g元素定義了元素定義了house、man、woman三個(gè)圖形組合三個(gè)圖形組合HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.5 漸變與透明度1漸變漸變1線性漸變線性漸變線性漸變就是一系列顏色沿著一條直線過(guò)渡。例如線性漸變就是一系列顏色沿著一條直線過(guò)渡。例如7-7定義了定義了3種線性漸變效果。種線性漸變效果。HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.5 漸變與透明度1漸變漸變1線性漸變線性漸變例如例如7-8定義了線性漸變定義了線性漸變Grad1，顏色由黑黃紅組，顏色由黑黃紅組成。成。HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.5 漸變與透明度1漸變漸變2徑

16、向漸變徑向漸變徑向漸變的每個(gè)漸變點(diǎn)表示一個(gè)圓形路徑，從中心徑向漸變的每個(gè)漸變點(diǎn)表示一個(gè)圓形路徑，從中心點(diǎn)向外擴(kuò)散。定義徑向漸變的語(yǔ)法格式如下：點(diǎn)向外擴(kuò)散。定義徑向漸變的語(yǔ)法格式如下：例如例如7-9演示了徑向漸變演示了徑向漸變HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.5 漸變與透明度1漸變漸變2徑向漸變徑向漸變例如例如7-10定義了三種徑向漸變顏色延展的效果定義了三種徑向漸變顏色延展的效果HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.5 漸變與透明度2透明度透明度 SVG使用使用opacity屬性定義整個(gè)元素的透明度，屬性定義整個(gè)元素的透明度，使用使用fill-opa

17、city屬性為填充屬性為填充fill屬性設(shè)置透明屬性設(shè)置透明度，使用度，使用stroke-opacity屬性為邊框?qū)傩詾檫吙騭troke屬性設(shè)置透明度，這些透明度取值范圍都是屬性設(shè)置透明度，這些透明度取值范圍都是0到到1之間。之間。例如例如7-11中繪制了透明度效果。中繪制了透明度效果。HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.6 濾鏡1濾鏡的定義濾鏡的定義 SVG的濾鏡效果使用的濾鏡效果使用filter元素定義，在需要濾鏡效果的圖形或容器元素定義，在需要濾鏡效果的圖形或容器上添加上添加filter:url屬性，引用定義好的濾鏡即可。屬性，引用定義好的濾鏡即可。標(biāo)記必須定標(biāo)記必須定義在義在標(biāo)記內(nèi)，需要定義標(biāo)記內(nèi)，需要定義id名稱(chēng)來(lái)標(biāo)識(shí)濾鏡，定義濾鏡的語(yǔ)法格名稱(chēng)來(lái)標(biāo)識(shí)濾鏡，定義濾鏡的語(yǔ)法格式如下：式如下： 在圖形或容器上引用濾鏡的語(yǔ)法格式如下：在圖形或容器上引用濾鏡的語(yǔ)法格式如下： HTML5+CSS3 Web 前端開(kāi)發(fā)技術(shù)前端開(kāi)發(fā)技術(shù)7.6 濾鏡2濾鏡的應(yīng)用濾鏡的應(yīng)用1 高斯模糊濾鏡高斯模糊濾鏡feGaussianBlur濾鏡的定義格式如下。濾鏡的定義格式如下。例如例如7-12定義了高