SVG應(yīng)用與開發(fā)1教學(xué)教材

1、Good is good, but better carries it.精益求精，善益求善。SVG應(yīng)用與開發(fā)1-SVG應(yīng)用與開發(fā)林玉東編寫一SVG規(guī)范1概述SVG是W3C組織制定的一種圖形格式規(guī)范詳細(xì)規(guī)范請查閱：HYPERLINK/TR/SVG11/TR/SVG11/HYPERLINK/有不少中文資料特點是：矢量圖形（類似Flash）基于XML，描述2維圖形處理3中圖元：矢量圖形、圖像、文本。圖元可以設(shè)置樣式、可以組合、變換以及蒙版濾鏡等處理修改SVG的DOM數(shù)據(jù)，可以實時改變SVG圖形，從而提供簡單一致的實時交互的能力。與之對應(yīng)的有Flash（前面全市SVG的優(yōu)點）。外部風(fēng)格頁Externa

2、lstylesheetsHYPERLINKtestsvg.html瀏覽2定義：SVG主要元素和屬性2.1基礎(chǔ)形狀：SVG定義了六種基本形狀線、矩形、橢圓、圓、線折、多邊形。線（line）：顯示兩個坐標(biāo)之間的連線。x1:線開始點x坐標(biāo)，缺省為0(即不設(shè)置改屬性則認(rèn)為0)y1:線開始點y坐標(biāo)，缺省為0 x2:線結(jié)束點x坐標(biāo)，缺省為0y2:線結(jié)束點y坐標(biāo)，缺省為0矩形（rect）：顯示左上角在指定點并且高度和寬度為指定值的矩形（包括正方形）。也可以通過指定邊角圓的x和y半徑畫成圓角矩形。x:x坐標(biāo)，缺省為0y:y坐標(biāo)，缺省為0width:寬度,非0，0不渲染。height:高度,非0，0不渲染。rx

3、/ry：圓角矩形橢圓半徑,圓角矩形的圓角過渡部分是一段四分之一的橢圓弧，分別代表其半長軸和半短軸。當(dāng)只指明了“rx”或“ry”其中的一個時，另一個缺省值與這個相等。如果都不指定，則缺省值為0圓（circle）：顯示一個圓心在指定點、半徑為指定長度的標(biāo)準(zhǔn)的圓。cx:圓心x坐標(biāo)，缺省為0cy:圓心y坐標(biāo)，缺省為0r：圓半徑,非0，0不渲染橢圓（ellipse）：顯示中心在指定點、長軸和短軸半徑為指定長度的橢圓。cx:橢圓圓心x坐標(biāo)，缺省為0cy:橢圓圓心y坐標(biāo)，缺省為0rx：橢圓x半徑,非0，0不渲染ry：橢圓y半徑,非0，0不渲染折線（polyline）：顯示頂點在指定點的一組線。points:

4、構(gòu)成折線的點序列，用空格分隔。多邊形（polygon）：類似于polyline，但增加了從最末點到第一點的連線，從而創(chuàng)建了一個閉合形狀。points:構(gòu)成多邊形的點序列，用空格分隔。2.2高級圖元221路徑(新一代的開發(fā)語言C#/Java都有)d:pathdata值M/m:moveto(x,y)命令，創(chuàng)建一個“當(dāng)前點”(x,y)：筆的起點L/l:lineto(x,y)命令，從當(dāng)前點到(x,y)繪制一條線，(x,y)變?yōu)楫?dāng)前點H/h:水平lineto(x,y)命令，從當(dāng)前點到(x,y)繪制一條水平線.V/v:垂直lineto(x,y)命令，從當(dāng)前點到(x,y)繪制一條垂直線.Z/z:closep

5、ath命令，結(jié)束當(dāng)前路徑，從最后一點到開始點繪制一條線。C/cQ/q:2/3次貝塞兒曲線A/a:圓弧命令（rx,ryarcx,y）222圖像在指定區(qū)域渲染指定的圖像。x/y/width/height:描述指定區(qū)域xlink:href:URI引用，描述圖像文件223文本Hello,outtherex,y表示文本的橫縱坐標(biāo)。dx,dy表示移動的橫縱坐標(biāo)。rotate表示旋轉(zhuǎn)的度數(shù)。對齊屬性：text-anchor（start|middle|end）字體屬性：font-familyfont-stylefont-weightfont-size2.3修飾渲染231注釋部分注釋內(nèi)容232定義可重用元素用來

6、定義可重用或不便于在主體內(nèi)定義，可在中定義。這部分信息可以是屬性、組合圖元等等。使用方法：將定義的項作為屬性使用將定義的項作為元素使用在一個HTML頁面上，使用z-index屬性來控制這一分層效果，而對于SVG圖像，則嚴(yán)格按順序放置各項。每個后繼層放置在那些已放置層的上面。233樣式與屬性：元素的屬性可以直接定義，也可以通過樣式來定義，就像HTML一樣。與HTML一樣，也有3種樣式的使用方法：鏈入外部樣式表文件定義內(nèi)部樣式塊對象使用style元素text.titlestroke:rgb(127,127,127);fill:none.BKBV-0KVstroke:rgb(127,127,127)

7、;fill:rgb(127,127,127)內(nèi)聯(lián)定義使用style屬性，與HTML元素一樣fill：基礎(chǔ)形狀的填充色（背景色），有效值后面介紹stroke：邊框顏色stroke-width：邊框?qū)挾萩lass:引用定義的樣式類（有效值是前3個屬性）fill-rule屬性fill-rule=nonezero|evenoddfill-opacity屬性fill-opacity=1|01stroke-opacity屬性stroke-linecap=butt|round|squarestroke-linejoin=miter|round|bevel|stroke-dasharray=lengthspa

8、cingstroke-dashoffset=樣式的使用也與HTML一樣，通過選擇府起作用：類選擇符使用class屬性引用234坐標(biāo)和變換坐標(biāo)與坐標(biāo)系元素：圖形的視口（viewport）,可簡單的認(rèn)為該元素描述了圖形的坐標(biāo)系。頂層SVG元素寬高屬性有效，X/Y屬性無效，寬高指視口的大小，缺省情況下坐標(biāo)系單位為象素：視口的大小用象素描述，所有的圖元的坐標(biāo)及大小全是象素。嵌套的SVG元素，不常用，可簡單的認(rèn)為是在外層視口內(nèi)嵌了一個新視口，主要用于坐標(biāo)偏移：其X/Y屬性有效。視口的大小除了絕對數(shù)據(jù)外，還可以用百分?jǐn)?shù)：width=100%height=100%，這最終都轉(zhuǎn)換為絕對象素。（SVG嵌入網(wǎng)頁則

9、該屬性無效）。viewBox屬性：SVG元素的一個屬性，該屬性使得圖形的坐標(biāo)變得復(fù)雜，SVG的spreserveAspectRatio屬性，對viewBox屬性有影響，在X/Y2方向有Min/Mid/Max3種值,如xMinYMid表示X方向左對齊Y方向具中對齊。viewBox屬性的值是由空格或逗號分割的4值序列、，寬高非付，=0表示不渲染圖形，spreserveAspectRatio屬性=none則表示將SVG圖形、范圍的內(nèi)容映射到視口內(nèi)！HTML容器：、或者是嵌入SVG控件的元素，他的width/height屬性決定了圖形的視口的大小。而若采用%值，則大小取決于其上層容器元素的大小。變換變

10、換矩陣：變換矩陣是SVG圖形變換的核心概念，一般都用6個雙精度數(shù)來描述33的仿射變換矩陣，表示為：matrixabcdef，與JAVA/C#一樣，采用左乘方式，列優(yōu)先存儲，所以e/f分別為X/Y方向的平移量（translation），a/d分別為X/Y方向的縮放量（scale），b/c為錯切(shear)量。設(shè)置變換：圖元變換通過transform屬性實現(xiàn)，其值可以是一個變換矩陣，也可以是變換命令（與JAVA/C#一樣），如：X/Y方向的分別平移100/200，可以寫為：也可以寫作：X/Y方向的分別縮放1/2.5倍，可以寫為：也可以寫作：;注意：等比縮放，可以寫作旋轉(zhuǎn)45度，可以寫作：，也可一

11、寫作；而旋轉(zhuǎn)的變換矩陣可以統(tǒng)一寫為：matrixcos(a)sin(a)sin(a)cos(a)00“組合”變換：即幾個變換組合在一起，可表示為：可以簡單的寫作：235特效濾鏡IE提供的濾鏡功能Style=”filter:progid:DXImageTransform.Microsoft.gradient(enabled=true,startColorStr=red,endColorStr=white);”,梯度色是濾鏡的一子內(nèi)容。圖案GUI軟件圖元的填充一般用顏色、圖案、圖片來實現(xiàn)，我們常用的WORD繪制的圖元就是如此。WORD的圖案可以認(rèn)為是一個像素圖標(biāo)，用該圖標(biāo)來平鋪需要填充的區(qū)域，而S

12、VG的圖案可以認(rèn)為是預(yù)定義的組合圖元，類似我們繪圖包的用戶自定義圖元，用該圖元來平鋪需要填充的區(qū)域。如梯度色又叫漸變色，漸變有兩種:線性漸變、放射性漸變。例如動畫簡單的說SVG采用了SMIL定義的動畫元素:animate、set、animateMotion、animateColor，這些元素有一般的屬性,如from、to、values等，也有用于樣條動畫(SplineAnimation)的專用屬性,如path、keyTimes、keySplines。比如：另一個例子蒙版、剪切等復(fù)合處理剪切蒙版Mask/模糊化3操作4其他相關(guān)技術(shù)4.1vmlv:*BEHAVIOR:url(#default#VM

13、L)4.2canvasfirefox/opera等支持window.onload=function()/Dothedrawingwhenthedocumentloadsvarcanvas=document.getElementById(square);/Getcanvaselementvarcontext=canvas.getContext(2d);/Get2Ddrawingcontextcontext.fillStyle=#f00;/Setfillcolortoredcontext.fillRect(0,0,90,90);/Fillasquarecanvas=document.getElem

14、entById(circle);/Newcanvaselementcontext=canvas.getContext(2d);/Getitscontextcontext.fillStyle=#00f;/Setbluefillcolorcontext.beginPath();/Beginashapecontext.moveTo(0,0);context.lineTo(50,50);context.arc(50,50,30,0,2*Math.PI,true);context.fill();/FilltheshapeThisisaredsquare:.Thisisabluecircle:.二SVG應(yīng)

15、用開發(fā)1基于瀏覽器平臺的應(yīng)用開發(fā)1.1用腳本操作SVG不同的實現(xiàn)腳本操作不同。Adobe的svgviewer采用ActiveX控件實現(xiàn)，內(nèi)置一個JavaScript引擎，firefox/opera內(nèi)置了對SVG的支持（但對SVG規(guī)范的支持都不完整）事件SVG規(guī)范Interactivity（HYPERLINK/TR/SVG11/interact.html/TR/SVG11/interact.html）一章描述SVG的事件DOM事件：onunload,onabort,onerror,onresize,onscroll,onzoom圖形事件：onfocusin,onfocusout,onactiva

16、te,onclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onload動畫事件：onbegin,onend,onrepeat,onload開發(fā)內(nèi)容動態(tài)創(chuàng)建刪除節(jié)點動態(tài)設(shè)置節(jié)點屬性坐標(biāo)變換、動畫。引入腳本與HTML一樣，可以引入外部腳本文件，也可以直接在SVG文件種定義腳本如：functioncircle_click(evt)varcircle=evt.target;varcurrentRadius=circle.getAttribute(r);if(currentRadius=100)circle.setAttrib

17、ute(r,currentRadius*2);elsecircle.setAttribute(r,currentRadius*0.5);AdobeViewer中SVG嵌入的腳本與網(wǎng)頁中的腳本的差異:2個JavaScript引擎1.2如何嵌入網(wǎng)頁SVG文件可通過以下標(biāo)簽嵌入HTML文檔：、或者。Javascript/JScriptVbScript2應(yīng)用程序模式2.1C#(VB/VC)AdobesvgviewerActiveX控件填寫SRC屬性，在設(shè)計器中即顯示出對應(yīng)的圖形2.2JAVABatik是基于java語言實現(xiàn)的一個SVG應(yīng)用的工具集，用于實現(xiàn)對SVG對象的顯示、編輯以及將SVG圖形對象轉(zhuǎn)換成其他圖片格式，如jpg、gif等。privateJSVGCanvassvgCanvas=neworg.apache.batik.swing.JSVGCanvas();SVGPanel.add(Center,svgCanvas);/一個綜合平移、放大和旋轉(zhuǎn)90度的復(fù)合變換java.awt.geom.Aff