|
記得當(dāng)年做技術(shù)時(shí),，經(jīng)常會(huì)遇到老師要改圖形格式的問題,，如，BMP格式,、WMF格式,、TIFF格式、JPEG格式,、SVG格式,、AI格式、PNG格式,、GIF格式等等,，圖形格式太多，搞得我“老虎老鼠,，傻傻分不清楚~~”,，秉承“知其然知其所以然”的科研心態(tài)，我決定從最基礎(chǔ)的開始學(xué)起,。 童鞋們,咱們走起......,？ 一、什么是SVG,？ svg的英文全稱為Scalable Vector Graphics,，意思為可縮放的矢量圖形。SVG 使用 XML 格式定義圖形,。 二,、SVG的優(yōu)勢(shì) 1. SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小,，且可壓縮性更強(qiáng),； 2. SVG 圖像可在任何的分辨率下被高質(zhì)量地打印,； 3. SVG 可在圖像質(zhì)量不下降的情況下被放大,； 4. SVG 易讀取和修改。 三,、SVG預(yù)定義的元素介紹 形狀元素: 非形狀元素: 四,、SVG的共有屬性 五、圖形代碼示例 矩形 （x，y)是矩形左上角坐標(biāo),，默認(rèn)是（0,，0）； （width,，height）是矩形的寬度和高度,； （rx，ry）是矩形圓角的水平半徑和垂直半徑,。 代碼示例： svg xmlns='http://www./2000/svg'>【左右滑動(dòng)查看完整信息】 代碼示例： svg xmlns='http://www./2000/svg'>【左右滑動(dòng)查看完整信息】 圓形 （cx,，cy）是圓心坐標(biāo)，默認(rèn)是（0,，0）,； r 是圓的半徑。 代碼示例： svg xmlns='http://www./2000/svg'>【左右滑動(dòng)查看完整信息】 橢圓 （cx,，cy）是橢圓中心點(diǎn)的坐標(biāo)，默認(rèn)是（0,，0）,； （rx，ry）是水平半徑和垂直半徑,。 代碼示例： svg xmlns='http://www./2000/svg'>【左右滑動(dòng)查看完整信息】 線 （x1，y1）是線條的起始坐標(biāo),，默認(rèn)是（0,，0）； （x2,，y2）是線條的終止坐標(biāo),，默認(rèn)是（0，0）,。 代碼示例： svg xmlns='http://www./2000/svg'> 【左右滑動(dòng)查看完整信息】 折線 points 屬性定義折線每個(gè)點(diǎn)的坐標(biāo)（x，y）,，用空格分隔每個(gè)點(diǎn),。 points的定義形式有兩種： points=”x1,y1 x2,y2 ……” points=”x1 y1 x2 y2 ……” 代碼示例： svg xmlns='http://www./2000/svg'> 【左右滑動(dòng)查看完整信息】 多邊形 points 屬性定義折線每個(gè)點(diǎn)的坐標(biāo)（x，y）,，用空格分隔每個(gè)點(diǎn),，頭尾自動(dòng)相連,。 points的定義形式有兩種： points=“x1,y1 x2,y2 ……” points=“x1 y1 x2 y2 ……” fill 屬性和折線的fill是一樣的,，填充的是首尾相連后的形狀的內(nèi)容 代碼示例： svg xmlns='http://www./2000/svg'> 【左右滑動(dòng)查看完整信息】
路徑 d用來定義每個(gè)關(guān)鍵點(diǎn)的路徑數(shù)據(jù),；以下標(biāo)記用來修飾路徑數(shù)據(jù)，所有命令均允許小寫字母,。大寫表示絕對(duì)定位,，小寫表示相對(duì)定位 直線命令 M = moveto(M X,Y) 需要兩個(gè)參數(shù)，分別是需要移動(dòng)到的點(diǎn)的x軸和y軸的坐標(biāo),。類似于移動(dòng)畫筆的位置
L = lineto(L X,Y) 需要兩個(gè)參數(shù)，分別是一個(gè)點(diǎn)的x軸和y軸坐標(biāo)，L命令將會(huì)在當(dāng)前位置和新位置（L前面畫筆所在的點(diǎn)）之間畫一條線段 H = horizontal lineto(H X) 畫水平線到指定的X坐標(biāo)位置 V = vertical lineto(V Y) 畫垂直線到指定的Y坐標(biāo)位置 H,V這兩個(gè)命令都只帶一個(gè)參數(shù),，標(biāo)明在x軸或y軸移動(dòng)到的位置,，因?yàn)樗鼈兌贾辉谧鴺?biāo)軸的一個(gè)方向上移動(dòng)。 C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY) (x,y)表示的是曲線的終點(diǎn),，(x1,y1)是起點(diǎn)的控制點(diǎn),，(x2,y2)是終點(diǎn)的控制點(diǎn)?？刂泣c(diǎn)描述的是曲線起始點(diǎn)的斜率,，曲線上各個(gè)點(diǎn)的斜率，是從起點(diǎn)斜率到終點(diǎn)斜率的漸變過程,。 有點(diǎn)抽象,，可以看一下例子 建議自己寫下代碼看看效果，代碼示例： svg xmlns='http://www./2000/svg'> 【左右滑動(dòng)查看完整信息】
S = smooth curveto(S X2,Y2,ENDX,ENDY) 當(dāng)一個(gè)點(diǎn)某一側(cè)的控制點(diǎn)是它另一側(cè)的控制點(diǎn)的對(duì)稱（以保持斜率不變）,，可以使用S命令,。簡(jiǎn)寫的貝塞爾曲線命令。 如果S命令跟在一個(gè)C命令或者另一個(gè)S命令的后面,，它的第一個(gè)控制點(diǎn),，就會(huì)被假設(shè)成前一個(gè)控制點(diǎn)的對(duì)稱點(diǎn)。如果S命令單獨(dú)使用,，前面沒有C命令或者另一個(gè)S命令,，那么它的兩個(gè)控制點(diǎn)就會(huì)被假設(shè)為同一個(gè)點(diǎn)。 繼續(xù)扔一個(gè)栗子來看看,。 【注意】藍(lán)色部分是對(duì)稱的控制點(diǎn),，代碼示例： svg xmlns='http://www./2000/svg'> 【左右滑動(dòng)查看完整信息】
Q = quadratic Bézier curve(Q X,Y,ENDX,ENDY) 二次貝塞爾曲線Q，只需要一個(gè)控制點(diǎn),，用來確定起點(diǎn)和終點(diǎn)的曲線斜率,。因此它需要兩組參數(shù)，控制點(diǎn)和終點(diǎn)坐標(biāo),。 繼續(xù)例子,，代碼示例如下： （注,，代碼中表示點(diǎn)的位置沒寫） svg xmlns='http://www./2000/svg'> 【左右滑動(dòng)查看完整信息】
效果圖，path是黑色曲線 T = smooth quadratic Bézier curveto(T ENDX,ENDY) 與S命令相似,，是Q命令的簡(jiǎn)寫命令,。與S命令相似，T也會(huì)通過前一個(gè)控制點(diǎn),，推斷出一個(gè)新的控制點(diǎn),。這意味著，在你的第一個(gè)控制點(diǎn)后面,，可以只定義終點(diǎn),，就創(chuàng)建出一個(gè)相當(dāng)復(fù)雜的曲線。 【需要注意】,，T命令前面必須是一個(gè)Q命令,，或者是另一個(gè)T命令，才能達(dá)到這種效果,。如果T單獨(dú)使用,，那么控制點(diǎn)就會(huì)被認(rèn)為和終點(diǎn)是同一個(gè)點(diǎn)，所以畫出來的將是一條直線,。 代碼示例： svg xmlns='http://www./2000/svg'> 【左右滑動(dòng)查看完整信息】
效果圖【注意藍(lán)色部分是自動(dòng)補(bǔ)全對(duì)稱的】 A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y) 弧線 Z = closepath(Z) 關(guān)閉路徑 文本 （x,，y）是文本左下角的坐標(biāo)； dx（dx1,，……）是文本相對(duì)基點(diǎn)x向右偏移的距離,； dy（dy1，……）是文本相對(duì)基點(diǎn)y向下偏移的距離,。 代碼示例: svg xmlns='http://www./2000/svg'> 【左右滑動(dòng)查看完整信息】
組 在 fill 用來設(shè)置該組所有成員的默認(rèn)填充顏色； opacity 用來設(shè)置該組所有成員的默認(rèn)不透明度,。 以上就是perl用來畫svg的基本知識(shí) 你學(xué)會(huì)了嗎,？
后期小編的畫圖系列會(huì)不斷更新 請(qǐng)持續(xù)關(guān)注哦！,！ 大項(xiàng)目事業(yè)部 周 陽丨文案 唐 娟 | 審核 |
|
|
