svg,是一種可縮放向量圖形,一種xml應用.可以以一種簡潔,可移植的形式表示圖形資訊.
計算機中描述圖形資訊的二大系統是柵格圖形和向量圖形,在柵格圖形系統中,影象被表示為元素或者畫素的長方形陣列,每個畫素用其rgb顏色值或者顏色表內的索引表示,這一系列畫素也稱為點陣圖.
在向量圖形系統中,影象被描述為一系列幾何形狀,向量圖形閱讀器接受在指定座標集上繪製形狀的指令,而不是接受一系列已經計算好的畫素.有人把向量圖形描述為一組繪圖指令,而位圖則是在特定的位置填充顏色的點.
向量圖形的用途:1:計算機輔助繪圖,cad,可以精確地測量和放大繪圖以便檢視細節非常重要,2:設計用於高解析度列印圖形的程式,
svg的特點:可縮放,不失真,無鋸齒,或鋸齒不明顯.
svg文件:
<?xmlversion="1.0"?>
"">
根元素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提倡表現與結構分離,
我們有四種方式指定影象的表現資訊分別是,內聯樣式,內部樣式表,外部樣式表,以及表現屬性
內聯樣式
內部樣式表
外部樣式表:
<?xml-stylesheethref=」ext_style.css」 type=」text/css」?>
表現屬性
表現屬性位於優先順序的最底部.
分組和引用物件
元素會將其所有的子元素作為乙個組合,通常組合還會有乙個唯一的id作為名稱,
元素,可以重用元素,
如元素,可以存放想要復用的物件,
元素也提供一種組合元素的方式,他的內容永遠不會顯示,它還可以指定viewbox 和preserveaspectratio屬性
元素可以包含乙個完整的svg或者柵格檔案,
SVG學習筆記（1）
以前聽過svg，那麼svg到底是什麼呢？跟著慕客老師一起來學習吧。1.svg是使用xml描述的向量檔案。2.點陣圖和向量圖的定義 點陣圖是基於顏色的描述，也就是每乙個顏色畫素點的組合。而向量圖呢，則是基於數學的描述，比如說一條曲線，還有svg ai等都是向量圖。3.svg的4種使用方式 瀏覽器直接開...
HTML學習筆記 五 SVG
在容器中，預定義有一些圖形標籤，方便開發者用於繪製圖形 0 通用屬性 這些圖形標籤有一些通用的屬性，用於控制圖形的樣式 1 矩形 使用標籤可以繪製矩形，該標籤常用的屬性如下 2 圓形 使用標籤可以繪製圓形，該標籤常用的屬性如下 3 橢圓 使用標籤可以繪製橢圓，該標籤常用的屬性如下 4 線段 使用標籤...
閱讀任務 閱讀筆記 4
功能驅動的設計 1 構造總體模型 2 構造功能列表 3 制定開發計畫 4 功能設計階段 5 實現具體功能 軟體測試按目的分類 1 功能測試 2 非功能測試 軟體測試的各種方法 1 單元測試和 覆蓋率測試 2 構建驗證測試 3 驗收測試 4 探索式的測試 5 回歸測試 6 場景 整合 系統測試 7 夥...