SVG開發學習【轉】

SVG中可以新增三種基本的物件:文字,圖形和路徑。

SVG文字(text):
blueknight

SVG圖形：
1、矩形

2、圓

SVG路徑(path):
路徑使用下面的屬性來描述:"moveto" 設定新的座標點
"lineto" 畫一條直線
"curveto" 使用貝賽爾函式畫制曲線
"arc" 畫橢圓和圓
"closepath" 閉合路徑

"M"代表moveto,設定座標點,"L"代表"lineto",畫一條直線,z代表結束。

SVG樣式表(CSS):
內部樣式表,植入式樣式表,外部樣式表。

植入式樣式表：
.st2{fill:none;stroke:#990000;stroke-width:2;}

SVG填充(fill)：
"填充"(fill)>>
fill後面可使用的值: none, current-color, (color)
"none"是無色,"Current-color"返回的是一個父文件(可以是XML文件或者SVG文件)的顏色值,(color)是自定義的色彩。

"填充規則"(fillrule)>>
fillrule後可使用的值: evenodd, nonzero, inherit
填充規則屬性定義對所有路徑區域填充或者只是對交叉部分填充
"inherit" 指的是當前物件的填充屬性和圍繞它的物件(或物件組)的屬性一致。

"填充透明度"(fill-opacity)>>
fill-opacity後可使用的值: 0到1的任何數
填充透明度決定了一個物件的填充是實色填充(透明度數值為1)還是透明的填充(透明度數值為0).關於物件的透明度屬性其他還有如:"筆劃透明度"(stroke-opacity),對應於筆劃的透明程度;"透明"(opacity),對應於物件整體的透明程度。

SVG筆劃(stroke):
"筆劃"(stroke)>>
stroke後面可使用的值: none, current-color, (color)
筆劃屬性決定了物件是否利用筆劃進行勾勒,並且使用什麼樣顏色的筆畫。"none"是無色,"Current-color"返回的是一個父文件(可以是XML文件或者SVG文件)的顏色值,(color)是自定義的色彩。

"筆劃寬度"(stroke-width)>>
stroke-width後可使用的值是: (width), inherit
"筆劃寬度"預設值是1畫素寬度。使用者也可以自定義寬度,可以使用畫素值也可以使用百分比。這裡的所有SVG影像都使用的是畫素值."inherit"代表繼承前面(父)的物件(或物件組)的筆劃屬性。

"筆劃端點"(stroke-linecap)>>
stroke-linecap可使用的值是: butt, round, square, inherit
"筆劃端點"的屬性定義了開放筆劃(未閉合)的端點的形狀,分別是"粗大的"butt,"圓滑的"round,"平整的"square和"繼承 的"inherit.

"筆劃連線"(stroke-linejoin)>>
stroke-linejoin可使用的值是:miter, round, bevel, inherit
筆劃連線屬性定義了路徑拐角的形狀,"miter"是預設值,"round"光滑連線,"bevel"折線連線,"inherit"繼承

"筆劃圓角連線"(stroke-miterlimit)>>stroke-miterlimit後可使用的值是: (miterlimit), inherit
"筆劃圓角連線"定義了兩條相交成一定角的線在連線處的圓滑程度。數值必須為大於1的整數,預設的值是8。

"虛線筆劃"(stroke-dasharray)>>
stroke-dasharray後可使用的值是:(dasharray), inherit

虛線筆劃定義了使用虛線的虛化程度

SVG梯度(Gradients):
梯度是填充和筆劃屬性的一個特殊應用。梯度可以產生用向量完成的色彩漸變。SVG支援線式的(linear)和圓式的(radial)色彩梯度變化。

梯度屬性的實現利用了(defs)標籤(元素),這個標籤包含了填充和筆劃屬性,由此,可以給物件加入特別的效果。結合下面的程式碼和例子,體會(defs)標籤的含義和使用。

SVG濾鏡:



<!-- Definition of filter goes here --&gt


Text with a cool effect

兩個關鍵的屬性就是SourceGraphic和SourceAlpha.SourceGraphic表示了需要被濾鏡的原始物件,例如圖形,文 本.SourceAlpha和SourceGraphic屬性上基本類似,但包含了一個alpha通道。這樣可以透過alpha通道的值實現濾鏡的功能。

　　透過簡單濾鏡的組合,還可以產生更加豐富和多樣的效果來。一般,影像濾鏡效果的產生首先是結合簡單濾鏡形成總的效果然後疊加入影像中產生最終影像。

SVG和當前的標準網路影像(JPEG,GIF,PNG):
image xling:href="/ "

SVG支援ICC色彩模式:
SVG檔案可以自由的制定所使用的色彩模式。使用ICC色彩模式需要定義(icc-color)屬性。SVG檔案預設的色彩是sRGB色彩,但是你可以透過(icc-color)轉換到ICC色彩。

　　下面的例子中同時使用了兩種色彩定義,當使用者系統支援ICC色彩模式時(win98和Mac OS已經自動安裝),就會以ICC模式顯示下面的"S V G",填充色#900000,筆劃色#800080。否則按照填充色紅色,筆劃色#0000FF顯示。

fill:red icc-color(myRGB,90,0,0);fill-opacity:.5;
stroke:#0000FF icc-color(myRGB,128,0,128);

SVG的變形屬性:
"矩陣"( (a)(b)(c)(d)(e)(f) )>>
"矩陣"定義了一個2*3的矩陣(或者看作六個數的一個數列). 它和元素相匹配.詳細請參看下面其他"變化"的解釋來理解.

"移動"( (tx)[(ty)] )>>
"移動"屬性的設定將移動元素.(tx)的值沿著x軸,(ty)的值沿著y軸.在六數數列中(即一個矩陣),數列的最後兩位為(tx)(ty).

如果要放縮元素而元素又不在中心點(0,0),那麼你必須先將元素移動使元素中心在中心點,然後執行"比例',元素放縮後,再將元素移動回到原來的位置.例如,要把一個在(150,100)出的元素縮小到50%,你需要執行下列步驟:
　　1. "移動"(150,100)
　　2. "比例" .5
　　3. "移動"(-150,-100)
　　(請注意次序)

"旋轉"( (rotate-angle) )>>
"旋轉"屬性的設定可以控制元素繞著中心點(0,0)旋轉任意角度(rotate-angle).例如,如果角度值(rotate-angle)為45 度,元素將會順時針旋轉45度.就像在"比例"中我們做的,如果元素不在中心點,我們首先要將它移動到中心點,然後旋轉,再將它移回原來的位置.

"x軸傾斜">>
"x軸傾斜"將在中心點(0,0)把元素在x軸軸向傾斜一定角度(angle).在六數數列中(即一個矩陣),"x軸傾斜"角度(angle)在第三位以弧度表示.

"y軸傾斜">>
"y軸傾斜"將在中心點(0,0)把元素在y軸軸向傾斜一定角度(angle).在六數數列中(即一個矩陣),"y軸傾斜"角度(angle)在第二位以弧度表示.

SVG動畫:
顏色動畫>>
(animateColor)元素定義了SVG顏色動畫的屬性.

attributeName定義了色彩動畫的性質,即填充變色,attributeType定義為SVG規範中已經給出 的具有動畫性質的CSS(串接樣式表 Cascading Stylesheets－簡稱CSS).其他的attributeType還有"XML"(動態標識語言)和"auto"(預設設定).

需要產生動畫的元素知道了要對什麼進行動畫,(上面的例子中元素就是被標識的"gradient_star"),它還需要知道怎樣進行變化來長生動畫.這需要下面的屬性值來描述:

from 定義起始數值
to 定義結束數值
by 定義相對的偏移值
values 一張相對分離的數值表

利用標籤dur和repeatCount控制動畫的時間屬性.色彩動畫總的持續時間由dur決定,在這個例子中是10秒,動畫的迴圈次數由 repeatCount定義,本例中repeatCount的值是不定值"indefinite",動畫將無限迴圈播放下去.

運動路徑>>
(animateMotion)標籤允許元素產生一些簡單的旋轉,放縮,移動和傾斜變化.

在(animateMotion)標籤裡新增路徑資料,SVG元素將可以沿著路徑產生運動.
"旋轉"rotate屬性控制SVG元素沿著特定路徑運動時 的的旋轉性質.旋轉的值可以是一個相對於當前使用者的圖形系統中所給定的x軸定義的一個角度值,也可預設為"auto",即沿著路徑方向旋轉,或 是"auto-reflect",沿著路徑方向的180度反方向旋轉.在上面的例子中,沿垂直的八字形運動的元素旋轉的值是-45度,沿著水平八字形運動 的元素旋轉的值是"auto".

運動控制>>
　　預設的運動一般是線性運動.calcMode的下列屬效能進一步控制元素的運動:

　　離散
　　動畫將在兩個數值之間產生跳躍的變化.

　　線性
　　預設設定.

　　步進 　　類似於線性,但定義了類線性變化的間隔值.

　　曲線
　　對應於按照貝賽爾曲線定義的時間-位置曲線.

　　關鍵曲線
　　使用"曲線"模式,能夠用最小的定義產生很複雜的變化.例如,實時的控制元素的x和y值,就能對應的實時控制元素的運動.

　　使用"曲線"模式,動畫元素需要包含keySplines屬性值.keySplines定義了貝賽爾曲線的關鍵控制點,來控制動畫的變化.這樣的控制允許平滑的產生變化(類似於淡入淡出的平滑效果),這一點在動畫中非常重要.