SVG精髓閱讀筆記

SVG,是一種可縮放矢量圖形,一種XML應用.可以以一種簡潔,可移植的形式表示圖形信息.

計算機中描述圖形信息的二大系統是柵格圖形和矢量圖形,在柵格圖形系統中,圖像被表示為圖片元素或者像素的長方形數組,每個像素用其RGB顏色值或者顏色表內的索引表示,這一系列像素也稱為位圖.

在矢量圖形系統中,圖像被描述為一系列幾何形狀,矢量圖形閱讀器接受在指定坐標集上繪制形狀的指令,而不是接受一系列已經計算好的像素.有人把矢量圖形描述為一組繪圖指令,而位圖則是在特定的位置填充顏色的點.

矢量圖形的用途:1:計算機輔助繪圖,CAD,可以精確地測量和放大繪圖以便查看細節非常重要,2:設計用于高分辨率打印圖形的程序,

SVG的特點:可縮放,不失真,無鋸齒,或鋸齒不明顯.

SVG文檔:

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

根元素svg可以用width和height二個屬性定義svg的像素寬和像素高的

SVG的一些基本元素和用法,

SVG的坐標原點在左上角(0,0)

元素circel可以畫圓相關圖形, 指定中心點的x坐標和y坐標以及半徑,如可以作為單獨屬性寫出來如:

用于劃線 ?x1 y1 x2 y2

分組 指定一個id 以便后續復用

變換復制組

折線

文本元素

矩形

在網頁中使用SVG

SVG作為圖像,作為圖像,作為CSS背景,作為對象,內聯SVG

SVG的坐標系統

視口,文檔使用的畫布區域稱為視口,單位可以em,默認字體大小,ex 字母x的高度,px像素,pt點pc12點cm厘米,mm毫米,in英寸可混用,沒有單位默認為像素

默認坐標是水平坐標向右遞增,垂直坐標垂直向下遞增

元素svg上的屬性viewBox屬性,有四個值,分表代表想要疊加在視口上的用戶坐標系統的最小x坐標,最小y坐標,寬度和高度

下面一行代碼是在4厘米*5厘米的圖紙上,設置每厘米16個單位的坐標系統

屬性viewBox的寬高比可以不同于視口的寬高比,在這種情況下SVG可以做三件事

1:按較小的尺寸等比例縮放圖形,以使圖形完全填充視口,

2:按較大的尺寸等比例縮放圖形并裁剪掉超出視口的部分

3:拉伸和擠壓繪圖以使其恰好填充新的視口

屬相preserveAspectRatio允許我們指定被縮放的圖形相對于視口的對齊方式,以及是希望它適配邊緣還是要裁剪,

PreserveAspectRatio=”alignment[meet | slice]”

其中alignment指定軸和位置, x,y Min Mid Max

Meet參數適配viewBox視口

參數slice會裁剪圖形不適合視口的部分,

如果使用none參數,圖像不會被等比例縮放,以使它的用戶坐標適合視口.

Svg支持嵌套的坐標系統將一個svg元素插入到一個新的文檔中

Svg中的基本形狀

線段

筆畫特性:stroke-width

筆畫顏色stroke

線條透明度stroke-opacity

虛線:stroke-dasharray

矩形

圓角矩形加上屬性rx 與ry

橢圓

多邊形 可以用來畫任意封閉圖形,不需要指定終點,自動閉合

屬性fill-rule規定填充的規則,二個值為nonzero 默認和evenodd

折線 不會自動閉合

當使用 和劃線時,可以為stroke-linecap指定不同的值來確定線的頭尾形狀,可能的取值為butt,round,square

屬性stroke-linejoin用來指定線段在圖形棱角處交叉時的效果,可能的取值有,miter 尖,round圓,bevel平

文檔結構:

Svg提倡表現與結構分離,

我們有四種方式指定圖像的表現信息分別是,內聯樣式,內部樣式表,外部樣式表,以及表現屬性

內聯樣式

內部樣式表

circle{undefined

fill:#ffc;

stoke:blue

}

]]>

外部樣式表:

表現屬性

表現屬性位于優先級的最底部.

分組和引用對象

元素會將其所有的子元素作為一個組合,通常組合還會有一個唯一的id作為名稱,

元素,可以重用元素,

如

元素,可以存放想要復用的對象,

元素也提供一種組合元素的方式,他的內容永遠不會顯示,它還可以指定viewBox 和preserveAspectRatio屬性

元素可以包含一個完整的svg或者柵格文件,

SVG

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。