Perl畫圖:SVG基礎篇(附資料下載)

記得當年做技術時,經常會遇到老師要改圖形格式的問題,如,BMP格式、WMF格式、TIFF格式、JPEG格式、SVG格式、AI格式、PNG格式、GIF格式等等,圖形格式太多,搞得我“老虎老鼠,傻傻分不清楚~~”,秉承“知其然知其所以然”的科研心態,我決定從最基礎的開始學起。

童鞋們,咱們走起……?

一、什么是SVG?
svg的英文全稱為Scalable Vector Graphics,意思為可縮放的矢量圖形。SVG 使用 XML 格式定義圖形。

二、SVG的優勢
1. SVG 與 JPEG 和 GIF 圖像比起來,尺寸更小,且可壓縮性更強;
2. SVG 圖像可在任何的分辨率下被高質量地打印;
3. SVG 可在圖像質量不下降的情況下被放大;
4. SVG 易讀取和修改。

三、SVG預定義的元素介紹
形狀元素:

非形狀元素:

四、SVG的共有屬性

五、圖形代碼示例
矩形 <rect>
<rect> 標簽用于創建矩形和圓角矩形

(x,y)是矩形左上角坐標,默認是(0,0);
(width,height)是矩形的寬度和高度;
(rx,ry)是矩形圓角的水平半徑和垂直半徑。
代碼示例:

代碼示例:

圓形 <circle>
<circle> 標簽用于創建一個圓
(cx,cy)是圓心坐標,默認是(0,0);
r 是圓的半徑。
代碼示例:

橢圓 <ellipse>
<ellipse> 標簽用于創建一個橢圓;
(cx,cy)是橢圓中心點的坐標,默認是(0,0);
(rx,ry)是水平半徑和垂直半徑。
代碼示例:

線 <line>
<line> 標簽用于創建一個線條;
(x1,y1)是線條的起始坐標,默認是(0,0);
(x2,y2)是線條的終止坐標,默認是(0,0)。
代碼示例:

折線 <polyline>
<polyline> 標簽用于創建任何只有直線的形狀;
points 屬性定義折線每個點的坐標(x,y),用空格分隔每個點。
points的定義形式有兩種:
points=”x1,y1 x2,y2 ……”
points=”x1 y1 x2 y2 ……”
代碼示例:

多邊形 <polygon>
<polygon> 標簽用來創建含有不少于三個邊的圖形。多邊形是由直線組成,其形狀是“封閉”的(所有的線條 連接起來)。
points 屬性定義折線每個點的坐標(x,y),用空格分隔每個點,頭尾自動相連。
points的定義形式有兩種:
points=“x1,y1 x2,y2 ……”
points=“x1 y1 x2 y2 ……”
fill 屬性和折線的fill是一樣的,填充的是首尾相連后的形狀的內容
代碼示例:

路徑 <path>
<path> 標簽用于定義一個路徑
d用來定義每個關鍵點的路徑數據;以下標記用來修飾路徑數據,所有命令均允許小寫字母。大寫表示絕對定位,小寫表示相對定位
直線命令
M = moveto(M X,Y)
需要兩個參數,分別是需要移動到的點的x軸和y軸的坐標。類似于移動畫筆的位置

L = lineto(L X,Y)
需要兩個參數,分別是一個點的x軸和y軸坐標,L命令將會在當前位置和新位置(L前面畫筆所在的點)之間畫一條線段

H = horizontal lineto(H X)
畫水平線到指定的X坐標位置

V = vertical lineto(V Y)
畫垂直線到指定的Y坐標位置
H,V這兩個命令都只帶一個參數,標明在x軸或y軸移動到的位置,因為它們都只在坐標軸的一個方向上移動。

C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)
(x,y)表示的是曲線的終點,(x1,y1)是起點的控制點,(x2,y2)是終點的控制點。控制點描述的是曲線起始點的斜率,曲線上各個點的斜率,是從起點斜率到終點斜率的漸變過程。

有點抽象,可以看一下例子
建議自己寫下代碼看看效果,代碼示例:

S = smooth curveto(S X2,Y2,ENDX,ENDY)
當一個點某一側的控制點是它另一側的控制點的對稱(以保持斜率不變),可以使用S命令。簡寫的貝塞爾曲線命令。
如果S命令跟在一個C命令或者另一個S命令的后面,它的第一個控制點,就會被假設成前一個控制點的對稱點。如果S命令單獨使用,前面沒有C命令或者另一個S命令,那么它的兩個控制點就會被假設為同一個點。

繼續扔一個栗子來看看。
【注意】藍色部分是對稱的控制點,代碼示例:

Q = quadratic Bézier curve(Q X,Y,ENDX,ENDY)
二次貝塞爾曲線Q,只需要一個控制點,用來確定起點和終點的曲線斜率。因此它需要兩組參數,控制點和終點坐標。

繼續例子,代碼示例如下:
(注,代碼中表示點的位置沒寫)

效果圖,path是黑色曲線

T = smooth quadratic Bézier curveto(T ENDX,ENDY)
與S命令相似,是Q命令的簡寫命令。與S命令相似,T也會通過前一個控制點,推斷出一個新的控制點。這意味著,在你的第一個控制點后面,可以只定義終點,就創建出一個相當復雜的曲線。
【需要注意】,T命令前面必須是一個Q命令,或者是另一個T命令,才能達到這種效果。如果T單獨使用,那么控制點就會被認為和終點是同一個點,所以畫出來的將是一條直線。

代碼示例:

效果圖【注意藍色部分是自動補全對稱的】

A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)

弧線

Z = closepath(Z)

關閉路徑

文本 <text>

(x,y)是文本左下角的坐標;

dx(dx1,……)是文本相對基點x向右偏移的距離;

dy(dy1,……)是文本相對基點y向下偏移的距離。

代碼示例:

組<g>

<g> 標簽是用于把所有相關元素進行組合的容器元素
在<g> id 用來設置該組的名稱;
fill 用來設置該組所有成員的默認填充顏色;
opacity 用來設置該組所有成員的默認不透明度。

以上就是perl用來畫svg的基本知識
你學會了嗎?

大項目事業部 周 陽丨文案
唐 娟 | 審核
圖片來自網絡,侵刪

最近文章
网络棋牌看牌器 四川快乐12走势图片 极速赛计划网页版 好彩网app客户端下载 重庆时时过年放假吗 极速赛计划一天36轮 快乐十分任五中奖胆拖规则 鼎盛娱乐时时彩被骗 极速时时开奖结果表 上海快三开奖结果快 开码查询 河内五分彩平台app 秒速时时号码 快乐助手下载 重庆时时彩app大全 河北时时开奖视频 法甲有哪些球队