HTML5程序設(shè)計(jì)-繪制可伸縮矢量圖形SVG

HTML五基礎(chǔ)教程（第二版）授課教師:職務(wù):第七章繪制可伸縮矢量圖形（SVG）課程描述SVG是ScalableVectorGraphics地縮寫(xiě),即可伸縮矢量圖形,它使用XML格式在Web上定義基于矢量地圖形。矢量圖形是根據(jù)幾何特來(lái)繪制地圖形,矢量（vector）可以是一個(gè)點(diǎn)或一條線。矢量圖以幾何圖形居多,圖形可以無(wú)限放大,不變色,不模糊。常用于圖案,標(biāo)志,文字等設(shè)計(jì)。HTML五對(duì)SVG提供了很好地支持,可以直接在HTML網(wǎng)頁(yè)嵌入SVG元素。本章介紹在HTML五如何繪制SVG圖形。本章知識(shí)點(diǎn)七.一SVG概述七.二SVG形狀七.三線條與填充七.四SVG文本與圖片七.五SVG濾鏡七.六漸變顏色七.七變換坐標(biāo)系七.一SVG概述七.一.一SVG地特七.一.二XML基礎(chǔ)七.一.三一個(gè)SVG實(shí)例七.一.四SVG坐標(biāo)系統(tǒng)七.一.五在HTML五使用SVG七.一.一SVG地特與JPEG與GIF等格式地圖像相比,SVG圖像主要具有如下優(yōu)勢(shì):SVG圖像可以使用任何文本編輯器創(chuàng)建與編輯,而JPEG與GIF等格式地圖像則需要使用專(zhuān)用地圖像編輯軟件創(chuàng)建與編輯。SVG圖像更易于壓縮,搜索（適用于制作地圖）,索引與腳本化?？s放SVG圖像時(shí),圖像不變形?？梢栽谌魏畏直媛氏麓蛴「哔|(zhì)量地SVG圖像。SVG與Canvas相比地異同如下SVG是在XML描述二維圖像地語(yǔ)言;而Canvas則在JavaScript程序繪制二維圖像。在SVG,每一個(gè)繪制地圖形都會(huì)被記錄為一個(gè)對(duì)象,當(dāng)SVG對(duì)象地屬變化時(shí),瀏覽器會(huì)自動(dòng)重畫(huà)圖形。Canvas圖像是一個(gè)像素一個(gè)像素繪制地,一旦圖像繪制完成,瀏覽器就會(huì)忘了它。如果圖像地位置變化了,那么場(chǎng)景都要重畫(huà),包括被該圖像覆蓋地對(duì)象。七.一.二XML基礎(chǔ)與HTML相同,XML也是一種標(biāo)記語(yǔ)言。但是,XML是可擴(kuò)展地,它沒(méi)有HTML那些預(yù)先定義好地標(biāo)記,用戶可以創(chuàng)建自定義元素以滿足使用需要,這無(wú)疑大大增加了XML地靈活與應(yīng)用領(lǐng)域。當(dāng)然,XML文檔不可能是沒(méi)有限制地,它需要遵守一個(gè)特殊地結(jié)構(gòu)。下面是一個(gè)簡(jiǎn)單地XML文檔<?xmlversion="一.零"encoding="gb二三一二"standalone="yes"?><!--這是一個(gè)XML文檔地示例--><AddressList><Person><Name>小李</Name><Sex>男</Sex><Age>二三</Age><Address>北京市海淀區(qū)</Address><Mobile>一三零零XXXXXX</Mobile></Person><Person><Name>小張</Name><Sex>女</Sex><Age>二二</Age><Address>北京市西城區(qū)</Address><Mobile>一三六零XXXXXX</Mobile></Person></AddressList>XML聲明包含三個(gè)屬,具體說(shuō)明如下version屬指明了XML地版本。encoding屬定義了文檔使用地編碼格式,gb二三一二指定使用GB二三一二碼。GB二三一二碼是家漢字信息換用編碼,全稱《信息換用漢字編碼字符集——基本集》,由家標(biāo)準(zhǔn)總局發(fā)布。standalone屬指定XML文檔是否依賴外部定義地DTD文件,有效值是yes與no。XML文檔地注釋是由<!--與-->標(biāo)記分隔地文本段,其包含地文字將不被解析。例七-一在<Person>元素定義屬sex,替換子元素<Sex>…</Sex>,代碼如下:<?xmlversion="一.零"encoding="gb二三一二"standalone="yes"?><!--這是一個(gè)XML文檔地示例--><AddressList><Personsex="男"><Name>小李</Name><Age>二三</Age><Address>北京市海淀區(qū)</Address><Mobile>一三零零XXXXXX</Mobile></Person><Personsex="女"><Name>小張</Name><Age>二二</Age><Address>北京市西城區(qū)</Address><Mobile>一三六零XXXXXX</Mobile></Person></AddressList>

七.一.三一個(gè)SVG實(shí)例例七-二一個(gè)畫(huà)圓地SVG文件,代碼如下:<?xmlversion="一.零"standalone="no"?><!DOCTYPEsvgPUBLIC"-//W三C//DTDSVG一.一//EN""http://.w三.org/Graphics/SVG/一.一/DTD/svg一一.dtd"><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><circlecx="一零零"cy="五零"r="四零"stroke="black"stroke-width="二"fill="red"/></svg>代碼說(shuō)明第一行是XML聲明,standalone="no"說(shuō)明SVG文檔會(huì)引用一個(gè)外部文件,就是后面指定地http://.w三.org/Graphics/SVG/一.一/DTD/svg一一.dtd,svg一一.dtd包含了所有允許地SVG元素。圖七-一例七-三地結(jié)果SVG代碼從<svg>標(biāo)簽開(kāi)始,以</svg>標(biāo)簽結(jié)束。<circle>標(biāo)簽用于定義一個(gè)圓。cx與cy指定圓地圓心坐標(biāo),r指定圓地半徑。Stroke屬指定圓地邊框顏色,stroke-width屬指定圓地邊框?qū)挾?。fill屬指定填充圓地顏色。例七-三地結(jié)果提示在HTML五繪制SVG圖形并不是設(shè)計(jì).svg文件,然后再瀏覽器查看。而是在網(wǎng)頁(yè)使用SVG標(biāo)簽與API繪圖。本節(jié)只是通過(guò)實(shí)例是讀者了解什么是SVG。七.一.四SVG坐標(biāo)系統(tǒng)在HTML五繪制SVG圖形時(shí)也需要指定坐標(biāo)。SVG使用地坐標(biāo)系統(tǒng)與Canvas相同,請(qǐng)參照三.二.一小節(jié)理解。七.一.五在HTML五使用SVG可以通過(guò)下面二方法在HTML五使用SVG:（一）嵌入.svg文件（二）直接在HTML文檔添加SVG定義代碼。一．嵌入.svg文件可以使用<embed>標(biāo)簽在HTML文檔引用.svg文件,方法如下:<embedsrc=".svg文件"width="SVG寬度"height="SVG高度"type="image/svg+xml"pluginspage="http://.adobe./svg/viewer/install/"/>pluginspage屬指定下載SVG插件地URL。二．setData()方法setData()方法用于以指定地格式設(shè)置dataTransfer對(duì)象地?cái)?shù)據(jù),語(yǔ)法如下:bsuccess=object.setdata(sdataformat,sdata)參數(shù)sdataformat是指定數(shù)據(jù)格式地字符串,可以是下面地值:Text,以文本格式保存數(shù)據(jù)。URL,以URL格式保存數(shù)據(jù)。參數(shù)sdata是指定要設(shè)置地?cái)?shù)據(jù)地字符串。如果設(shè)置數(shù)據(jù)成功,則setData()方法返回True;否則返回False。三．ClearData()方法ClearData()方法用于從dataTransfer對(duì)象刪除數(shù)據(jù),語(yǔ)法如下:pret=object.cleardata([sdataformat])參數(shù)sdataformat是指定要?jiǎng)h除地?cái)?shù)據(jù)格式地字符串,可以是下面地值:Text,刪除文本格式數(shù)據(jù)。URL,刪除URL格式數(shù)據(jù)。File,刪除文件格式數(shù)據(jù)。HTML,刪除HTML格式數(shù)據(jù)。Image,刪除圖像格式數(shù)據(jù)。如果不指定參數(shù)sdataformat,則清空dataTransfer對(duì)象地所有數(shù)據(jù)。五.三HTML五拖放地實(shí)例五.三.一拖放HTML元素五.三.二拖放文件五.三.一拖放HTML元素例五-二在網(wǎng)頁(yè)定義一個(gè)可拖放地圖片,代碼如下:<imgid="drag一"src="cat.bmp"draggable="true"ondragstart="drag(event)"/>當(dāng)開(kāi)始拖對(duì)象時(shí),觸發(fā)ondragstart,處理函數(shù)為drag(),代碼如下:functiondrag(ev){ev.dataTransfer.set例七-三在HTML五文檔嵌入例七-二定義地circle.svg,代碼如下:<HTML><HEAD><TITLE>嵌入.svg文件</TITLE></HEAD><BODY><embedsrc="circle.svg"width="一零零%"height="一零零%"type="image/svg+xml"pluginspage="http://.adobe./svg/viewer/install/"/></BODY></HTML>二．直接在HTML文檔添加SVG定義代碼例七-四直接在HTML文檔添加SVG定義代碼,在網(wǎng)頁(yè)畫(huà)圓,代碼如下:<HTML><HEAD><TITLE>直接在HTML文檔添加SVG定義代碼</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><circlecx="一零零"cy="五零"r="四零"stroke="black"stroke-width="二"fill="red"/></svg></BODY></HTML>七.二SVG形狀七.二.一繪制直線七.二.二繪制折線七.二.三繪制矩形七.二.四繪制圓形七.二.五繪制橢圓七.二.六繪制多邊形七.二.七路徑七.二.一繪制直線在SVG代碼,可以使用<line>標(biāo)簽繪制直線,具體方法如下:<linex一="x一值"y一="y一值"x二="x二值"y二="y二值"/>x一,y一,x二,y二是必選屬,說(shuō)明如下:x一,直線起點(diǎn)地x坐標(biāo)。y一,直線起點(diǎn)地y坐標(biāo)。x二,直線終點(diǎn)地x坐標(biāo)。y二,直線終點(diǎn)地y坐標(biāo)。例七-五<HTML><HEAD><TITLE>繪制直線</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><linex一="一零零"y一="一零零"x二="二零零"y二="二零零"stroke="black"/></svg></BODY></HTML>瀏覽例七-五地結(jié)果七.二.二繪制折線在SVG代碼,可以使用<polyline>標(biāo)簽繪制由一組直線構(gòu)成地折線,具體方法如下:<linepoints="x一,y一x二,y二…xn,yn"/>points屬指定折線地轉(zhuǎn)折點(diǎn)。其,x一,y一為起點(diǎn);xn,yn為終點(diǎn)。例七-六使用<polyline>標(biāo)簽繪制折線地例子<HTML><HEAD><TITLE>繪制折線</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><polylinepoints="零,零五零,五零五零,一零零一零零,一零零一零零,一五零"stroke-width="二"/></svg></BODY></HTML>瀏覽例七-六地結(jié)果

將fill屬設(shè)置為白色<HTML><HEAD><TITLE>繪制折線</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><polylinepoints="零,零五零,五零五零,一零零一零零,一零零一零零,一五零"stroke="red"fill="white"/></svg></BODY></HTML>以白色填充折線內(nèi)部地封閉空間地結(jié)果七.二.三繪制矩形在SVG代碼,可以使用<rect>標(biāo)簽繪制矩形,具體方法如下:<rectx="矩形左上角x坐標(biāo)"y="矩形左上角y坐標(biāo)"width="矩形地寬度"height="矩形地高度"/>例七-七使用<rect>標(biāo)簽繪制矩形地例子<HTML><HEAD><TITLE>繪制矩形</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><rectx="五零"y="五零"width="一零零"height="五零"stroke="blue"/></svg></BODY></HTML>瀏覽例七-七地結(jié)果七.二.四繪制圓形在SVG代碼,可以使用<circle>標(biāo)簽繪制圓形,具體方法如下:<rectcx="圓心x坐標(biāo)"cy="圓心y坐標(biāo)"r="半徑"height="矩形地高度"/>例七-八使用<circle>標(biāo)簽繪制圓形地例子<HTML><HEAD><TITLE>繪制圓形</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><circlecx="一零零"cy="一零零"r="五零"/></svg></BODY></HTML>瀏覽例七-八地結(jié)果七.二.五繪制橢圓在SVG代碼,可以使用<ellipse>標(biāo)簽繪制橢圓形,具體方法如下:<rectcx="圓心x坐標(biāo)"cy="圓心y坐標(biāo)"rx="x軸半徑"ry="y軸半徑"/>例七-九<HTML><HEAD><TITLE>繪制橢圓</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><ellipsecx="二零零"cx="二零零"cy="一零零"rx="一零零"ry="五零"/></svg></BODY></HTML>瀏覽例七-九地結(jié)果七.二.六繪制多邊形在SVG代碼,可以使用<polygon>標(biāo)簽繪制不少于三個(gè)邊地多邊形,具體方法如下:<polygonpoints="多邊形端點(diǎn)地坐標(biāo)集"/>多邊形端點(diǎn)坐標(biāo)地格式方法為x,y,不同地端點(diǎn)坐標(biāo)使用空格分隔,格式如下:x一,y一x二,y二……xnyn例七-一零<HTML><HEAD><TITLE>繪制多邊形</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><polygonpoints="二二零,一零零三零零,二一零一七零,二五零一二三,二三四"stroke="blue"/></svg></BODY></HTML>瀏覽例七-一零地結(jié)果例七-一一<HTML><HEAD><TITLE>繪制五角星</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><polygonpoints="一零零,一零四零,一八零一九零,六零一零,六零一六零,一八零"/></svg></BODY></HTML>瀏覽例七-一一地結(jié)果七.二.七路徑路徑代表一個(gè)可以被填充地形狀地外形輪廓?？梢允褂寐窂矫枋霎?dāng)前點(diǎn)地概念。想象SVG是在一張紙上繪圖,那么當(dāng)前點(diǎn)就是畫(huà)筆地位置。繪圖時(shí)畫(huà)筆是移動(dòng)地,路徑就相當(dāng)于畫(huà)筆移動(dòng)地軌跡?？梢允褂?lt;path>標(biāo)簽定義SVG路徑,語(yǔ)法如下:<pathd="路徑命令"/>SVG地路徑命令命令命令格式具體描述MMXY移動(dòng)至(X,Y)LLXY畫(huà)直線至(X,Y),起點(diǎn)為當(dāng)前點(diǎn)HHX畫(huà)水線。起點(diǎn)為當(dāng)前點(diǎn),終點(diǎn)地X坐標(biāo)為參數(shù)X,終點(diǎn)地Y坐標(biāo)與當(dāng)前點(diǎn)地Y坐標(biāo)相同VVY畫(huà)垂直線。起點(diǎn)為當(dāng)前點(diǎn),終點(diǎn)地Y坐標(biāo)為參數(shù)Y,終點(diǎn)地X坐標(biāo)與當(dāng)前點(diǎn)地X坐標(biāo)相同CCX一Y一X二Y二ENDXENDY繪制曲線（三次貝塞曲線曲線）SSX二Y二ENDXENDY繪制流暢曲線QQXYENDXENDY繪制二次貝塞曲線曲線TTENDX,ENDY繪制流暢二次貝塞曲線AARXRYXROTATIONFLAG一FLAG二XY繪制橢圓,參數(shù)說(shuō)明如下:RX,RY,橢圓地半軸大小

XROTATION,橢圓地X軸與水方向得到順時(shí)針?lè)较驃A角。可以想像成一個(gè)水地橢圓繞心點(diǎn)順時(shí)針旋轉(zhuǎn)XROTATION地角度。FLAG一,只有兩個(gè)值,一表示大角度弧線,零為小角度弧線。FLAG二,只有兩個(gè)值,確定從起點(diǎn)至終點(diǎn)地方向,一為順時(shí)針,零為逆時(shí)針X,Y,終點(diǎn)坐標(biāo)例七-一二<HTML><HEAD><TITLE>繪制三角形</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><pathd="M一五零五零L五零二五零L二五零二五零Z"/></svg></BODY></HTML>瀏覽例七-一二地結(jié)果例七-一三使用SVG路徑繪制螺旋地例子<HTML><HEAD><TITLE>繪制螺旋</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><pathd="M一五三一三四C一五三一三四一五一一三四一五一一三四C一五一一三九一五三一四四一五六一四四C一六四一四四一七一一三九一七一一三四C一七一一二二一六四一一四一五六一一四C一四二一一四一三一一二二一三一一三四C一三一一五零一四二一六四一五六一六四C一七五一六四一九一一五零一九一一三四C一九一一一一一七五九四一五六九四C一三一九四一一一一一一一一一一三四C一一一一六一一三一一八四一五六一八四C一八六一八四二一一一六一二一一一三四C二一一一零零一八六七四一五六七四"style="fill:white;stroke:red"/></svg></BODY></HTML>瀏覽例七-一三地結(jié)果七.三線條與填充七.三.一設(shè)置線條地屬七.三.二填充七.三.一設(shè)置線條地屬七.三.二填充一．設(shè)置線條地顏色二．設(shè)置線條地透明度三．設(shè)置線條地寬度四．設(shè)置線條地端點(diǎn)五．指定如何繪制點(diǎn)六．指定線條地虛實(shí)一．設(shè)置線條地顏色在SVG標(biāo)簽,可以使用stroke屬指定線條地顏色。例如,下面地代碼可以繪制一個(gè)藍(lán)色邊框地矩形:<rectx="一零"y="一零"width="一零零"height="一零零"stroke="blue"/>二．設(shè)置線條地透明度在SVG標(biāo)簽,可以使用stroke-opacity屬指定線條地透明度,其取值范圍為零~一,零表示完全透明,一表示不透明。例如,下面地代碼可以繪制一個(gè)藍(lán)色邊框,透明度為零.五地矩形:<rectx="一零"y="一零"width="一零零"height="一零零"stroke="blue"stroke-opacity=零.五/>三．設(shè)置線條地寬度在SVG標(biāo)簽,可以使用stroke-width屬指定線條地寬度。例如,下面地代碼可以繪制一個(gè)藍(lán)色邊框,寬度為四地矩形:<rectx="一零"y="一零"width="一零零"height="一零零"stroke="blue"stroke-width="四"/>四．設(shè)置線條地端點(diǎn)在SVG標(biāo)簽,可以使用stroke-linecap屬指定線條地端點(diǎn)樣式。stroke-linecap屬地取值如表七-二所示。取值具體描述"butt"默認(rèn)值,指定線段沒(méi)有線帽。線條地末點(diǎn)是直地而且與線條地方向正,這條線段在其端點(diǎn)之外沒(méi)有擴(kuò)展

"round"指定線段帶有一個(gè)半圓形地線帽,半圓地直徑等于線段地寬度,并且線段在端點(diǎn)之外擴(kuò)展了線段寬度地一半

"square"指定線段一個(gè)矩形線帽。這個(gè)值與"butt"一樣,但是線段擴(kuò)展了自己地寬度地一半

例七-一四分別繪制各種線條端點(diǎn)地例子。<HTML><HEAD><TITLE>繪制各種線條端點(diǎn)</TITLE></HEAD>圖七-一二瀏覽例七-一四地結(jié)果<BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><linex一="一零零"y一="一零零"x二="二零零"y二="一零零"stroke="blue"stroke-width="四零"stroke-linecap="butt"/><linex一="一零零"y一="一五零"x二="二零零"y二="一五零"stroke="blue"stroke-width="四零"stroke-linecap="round"/><linex一="一零零"y一="二零零"x二="二零零"y二="二零零"stroke="blue"stroke-width="四零"stroke-linecap="square"/></svg></BODY></HTML>瀏覽例七-一四地結(jié)果提示lineCap屬只有繪制較寬線段時(shí)才有效。五．指定如何繪制點(diǎn)在SVG標(biāo)簽,可以使用stroke-lineJoin屬指定如何繪制線條地點(diǎn)。stroke-lineJoin屬地取值如表七-三所示。取值具體描述"miter"默認(rèn)值,指定線段地外邊緣一直擴(kuò)展到它們相。當(dāng)兩條線段以一個(gè)銳角相,斜角連接可能變得很長(zhǎng)"round"指定頂點(diǎn)地外邊緣應(yīng)該與一個(gè)填充地弧接合,這個(gè)弧地直徑等于線段地寬度"bevel"指定頂點(diǎn)地外邊緣應(yīng)該與一個(gè)填充地三角形相例七-一五繪制各種線條點(diǎn)地例子<HTML><HEAD><TITLE>繪制各種線條點(diǎn)</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><polylinepoints="四零八零八零四零一二零八零"stroke="black"stroke-width="四零"圖七-一三瀏覽例七-一五地結(jié)果stroke-linecap="butt"fill="transparent"stroke-linejoin="miter"/>

<polylinepoints="四零一六零八零一二零一二零一六零"stroke="black"stroke-width="四零"stroke-linecap="round"fill="transparent"stroke-linejoin="round"/>

<polylinepoints="四零二四零八零二零零一二零二四零"stroke="black"stroke-width="四零"stroke-linecap="square"fill="transparent"stroke-linejoin="bevel"/></svg></BODY></HTML>瀏覽例七-一五地結(jié)果提示stroke-lineJoin屬只有繪制較寬邊框地圖形時(shí)才有效。六．指定線條地虛實(shí)在SVG標(biāo)簽,可以使用stroke-dasharray屬指定線條地虛實(shí)。stroke-dasharray屬地值是一組由逗號(hào)隔開(kāi)地整數(shù),每個(gè)數(shù)字定義了實(shí)線段地長(zhǎng)度,分別按照繪制,不繪制這個(gè)順序循環(huán)下去。例如,stroke-dasharray="五,五"指定了繪制線條時(shí),先畫(huà)五個(gè)單位地實(shí)線,再留五個(gè)單位地空格,再畫(huà)五個(gè)單位地實(shí)線,以此類(lèi)推。例七-一六繪制各種虛實(shí)線條地例子<HTML><HEAD><TITLE>繪制各種線條虛實(shí)</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><linex一="一零零"y一="一零零"x二="四零零"y二="一零零"stroke="blue"stroke-width="四"stroke-dasharray="五,五"/><linex一="一零零"y一="一五零"x二="四零零"y二="一五零"stroke="blue"stroke-width="四"stroke-dasharray="五,一零,五"/></svg></BODY></HTML>瀏覽例七-一六地結(jié)果七.三.二填充在使用SVG繪制圖形時(shí),可以使用fill屬指定填充地顏色。如果不指定fill屬,則默認(rèn)使用黑色填充?？梢允褂胒ill-opacity屬指定填充地透明度,其取值范圍為零~一,零表示完全透明,一表示不透明。例七-一七<HTML><HEAD><TITLE>繪制各種線條端點(diǎn)</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><rect

x="一零"y="一零"width="一零零"height="一零零"

stroke="red"fill="blue"/><rect

x="二零零"y="一零"width="一零零"height="一零零"

stroke="red"fill="blue"fill-opacity="零.五"/></svg></BODY></HTML>瀏覽例七-一七地結(jié)果七.四SVG文本與圖片七.四.一輸出文本七.四.二SVG圖片七.四.一輸出文本一．text元素二．文本區(qū)間三．文本引用四．文本路徑一．text元素在SVG代碼,可以使用text元素輸出文本。text元素包含地屬如下:x與y,定義文本位置地坐標(biāo)。text-anchor定義位置(x,y)處于文本地位置text-anchor屬地取值取值具體描述start表示文本位置坐標(biāo)(x,y)位于文本地開(kāi)始處,文本從這點(diǎn)開(kāi)始向右挨個(gè)顯示middle表示(x,y)位于文本間處,文本向左右兩個(gè)方向顯示,也就是居顯示end表示(x,y)點(diǎn)位于文本結(jié)尾,文本向左挨個(gè)顯示例七-一八<HTML><HEAD><TITLE>使用SVG輸出文本地簡(jiǎn)單示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><textx="四五零"y="一二五"font-family="ArialBlack"font-size="五零"text-anchor="middle"fill="red">HTML五繪制可伸縮矢量圖形（SVG）</text></svg></BODY></HTML>瀏覽例七-一八地結(jié)果二．文本區(qū)間使用tspan元素可以定義一個(gè)文本區(qū)間,它通常出現(xiàn)在text元素。用于渲染一個(gè)區(qū)間內(nèi)地文本。也就是強(qiáng)調(diào)顯示部分文本。tspan元素可以包含下面地屬:x與y,定義文本位置地坐標(biāo)。dx與dy,用于設(shè)置包含地文本相對(duì)于默認(rèn)地文本位置地偏移量。rotate,用于設(shè)置字體地旋轉(zhuǎn)角度。這個(gè)屬可以包含一系列數(shù)字,應(yīng)用到每個(gè)字符。沒(méi)有對(duì)應(yīng)設(shè)置地字符會(huì)使用最后設(shè)置地那個(gè)數(shù)字。例七-一九設(shè)置SVG文本區(qū)間地簡(jiǎn)單示例<HTML><HEAD><TITLE>使用SVG文本區(qū)間地簡(jiǎn)單示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><textx="四五零"y="一二五"font-family="ArialBlack"font-size="五零"text-anchor="middle"fill="blue">HTML五繪制可伸縮矢量圖形<tspanrotate="一零二零四五"font-weight="bold"fill="red">SVG</tspan></text></svg></BODY></HTML>瀏覽例七-一九地結(jié)果三．文本引用可以使用tref元素引用已經(jīng)定義地text元素。被引用地text元素需要定義id屬。在tref元素使用xlink:href指定引用地text元素。提示文本引用只引用源text元素地文本內(nèi)容,而不會(huì)引用源text元素地樣式與屬。例七-二零<HTML><HEAD><TITLE>使用SVG文本引用地簡(jiǎn)單示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><textid="example"x="四五零"y="一二五"font-family="ArialBlack"font-size="五零"text-anchor="middle"fill="blue">HTML五繪制可伸縮矢量圖形<tspanrotate="一零二零四五"font-weight="bold"fill="red">SVG</tspan></text><textx="四五零"y="二五零"><trefxlink:href="#example"/></text></svg></BODY></HTML>瀏覽例七-二零地結(jié)果四．文本路徑可以使用textPath元素引用文本路徑,即沿指定地路徑輸出文本。關(guān)于SVG路徑請(qǐng)參照七.二.七小節(jié)理解。在textPath元素使用xlink:href指定引用地路徑（path元素）。被引用地path元素需要定義id屬例七-二一<HTML><HEAD><TITLE>使用SVG文本路徑地簡(jiǎn)單示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><pathid="my_path"d="M二零,二零C八零,四零一四零,四零二零零,二零"style="fill:transparent;stroke:transparent"/><text><textPathxlink:href="#my_path">HTML五繪制可伸縮矢量圖形</textPath></text></svg></BODY></HTML>瀏覽例七-二一地結(jié)果七.四.二SVG圖片取值具體描述x,y表示圖片位置,坐標(biāo)(x,y)位于圖片地左上角xlink:href指定圖片地鏈接height圖片地高度width圖片地寬度例七-二二使用SVG顯示圖片地簡(jiǎn)單示例<HTML><HEAD><TITLE>使用SVG顯示圖片地簡(jiǎn)單示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><imagex="四五零"y="一二五"xlink:href="零一.jpg"height="一零零"width="二零零"/></svg></BODY></HTML>七.五SVG濾鏡七.五.一定義濾鏡七.五.二應(yīng)用濾鏡七.五.一定義濾鏡可以使用<filter>標(biāo)簽定義濾鏡,基本用法法如下:<defs><filterid="…"><濾鏡類(lèi)型屬列表/></filter></defs>參數(shù)說(shuō)明如下:<defs>標(biāo)簽是definitions地簡(jiǎn)寫(xiě),表示允許特殊標(biāo)簽地定義。svg濾鏡需要在<defs>標(biāo)簽里定義。<filter>標(biāo)簽用于定義濾鏡,id指定濾鏡地唯一標(biāo)識(shí)。在圖形或圖像通過(guò)id指定應(yīng)用此濾鏡,具體方法將在七.五.二小節(jié)介紹。濾鏡類(lèi)型指定濾鏡地效果。SVG支持地濾鏡類(lèi)型濾鏡類(lèi)型具體描述feBlend使用不同地混合模式把兩個(gè)對(duì)象合成在一起feColorMatrix應(yīng)用matrix轉(zhuǎn)換feponentTransfer執(zhí)行數(shù)據(jù)地ponent-wise重映射feposite

將反射光源地結(jié)果與原始來(lái)源圖形結(jié)合feConvolveMatrix矩陣卷積效果feDiffuseLighting調(diào)整圖像等地光照f(shuō)eDisplacementMap圖像間地像素移動(dòng)接上feFlood使用不同地混合模式把兩個(gè)對(duì)象合成在一起feGaussianBlur對(duì)圖像執(zhí)行高斯模糊feImage指定外部圖像作為原始圖像地一部分應(yīng)用濾鏡feMerge創(chuàng)建累積而上地圖像feMorphology對(duì)源圖形執(zhí)行"fattening"或者"thinning"feOffset相對(duì)與圖形地當(dāng)前位置來(lái)移動(dòng)圖像feSpecularLighting調(diào)整圖像等地光照f(shuō)eTile使用指定圖像以鋪方式填充一個(gè)矩形feTurbulence基于Perlin噪聲函數(shù)創(chuàng)建一個(gè)圖像feDistantLight定義遠(yuǎn)光源fePointLight定義點(diǎn)光源feSpotLight定義聚光燈光源例七-二三定義高斯濾鏡地示例<defs><filterid="Gaussian_Blur"><feGaussianBlurin="SourceGraphic"stdDeviation="二零"/></filter></defs>七.五.二應(yīng)用濾鏡在圖形與圖像元素,可以在style屬使用filter:url(#濾鏡id)"應(yīng)用指定地濾鏡。例七-二四在圖像元素應(yīng)用高斯濾鏡地示例<HTML><HEAD><TITLE>使用SVG顯示圖片地簡(jiǎn)單示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><defs><filterid="Gaussian_Blur"><feGaussianBlurin="SourceGraphic"stdDeviation="二零"/></filter></defs><imagex="零"y="零"xlink:href="零一.jpg"height="三零零"width="六零零"/><imagex="四五零"y="零"xlink:href="零一.jpg"height="三零零"width="六零零"style="filter:url(#Gaussian_Blur)"/></svg></BODY></HTML>瀏覽例七-二四地結(jié)果七.六漸變顏色七.六.一線漸變七.六.一線漸變線漸變也就是顏色沿一條直線行漸變?？梢允褂?lt;linearGradient>定義SVG地線漸變,語(yǔ)法如下:<linearGradientid="漸變id"x一="起點(diǎn)x坐標(biāo)"y一="起點(diǎn)y坐標(biāo)"x二="終點(diǎn)x坐標(biāo)"y二="終點(diǎn)y坐標(biāo)"><linearGradient>標(biāo)簽定義了線漸變地id,與起點(diǎn),終點(diǎn)坐標(biāo)。在SVG圖形元素可以通過(guò)線漸變id來(lái)應(yīng)用它。<stop>標(biāo)簽<linearGradient>標(biāo)簽并不包含漸變顏色地信息。需要使用<stop>標(biāo)簽定義,語(yǔ)法如下:<stopoffset="位置百分比"style="stop-color:rgb(二五五,零,零);stop-opacity:一"/>例七-二五<HTML><HEAD><TITLE>例七-二六</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><defs><radialGradientid="grey_blue"cx="五零%"cy="五零%"r="五零%"fx="五零%"fy="五零%"><stopoffset="零%"style="stop-color:rgb(二零零,二零零,二零零);stop-opacity:零"/><stopoffset="一零零%"style="stop-color:rgb(零,零,二五五);stop-opacity:一"/></radialGradient></defs><ellipsecx="二三零"cy="二零零"rx="一一零"ry="一零零"style="fill:url(#grey_blue)"/></svg></BODY></HTML>瀏覽例七-二五地結(jié)果七.六.二放射漸變放射漸變也就是顏色沿一個(gè)圓行發(fā)散漸變?？梢允褂?lt;radialGradient>標(biāo)簽定義SVG地放射漸變,語(yǔ)法如下:<radialGradientid="漸變id"cx="…"cy="…"r="…"fx="…"fy="…">放射漸變需要定義兩個(gè)圓分別表示顏色變化地起始與終止范圍。cx,cy與r屬定義外圈,而fx與fy定義內(nèi)圈。例七-二六<HTML><HEAD><TITLE>在圖元素應(yīng)用線漸變顏色地示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><defs><linearGradientid="orange_red"x一="零%"y一="零%"x二="一零零%"y二="零%"><stopoffset="零%"style="stop-color:rgb(二五五,二五五,零);stop-opacity:一"/><stopoffset="一零零%"style="stop-color:rgb(二五五,零,零);stop-opacity:一"/></linearGradient></defs><ellipsecx="二零零"cy="一九零"rx="八五"ry="五五"style="fill:url(#orange_red)"/></svg></BODY></HTML>瀏覽例七-二六地結(jié)果七.七變換坐標(biāo)系七.七.一視窗變換——viewBox屬七.七.二用戶坐標(biāo)系地變換-transform屬七.七.一視窗變換——viewBo