SVG 開發學習 總覽

SVG中能夠添加三種基本的物件:文本,圖形和路徑。 

SVG文本(text):<text style="fill:blue;" y="15">blueknight</text> 
  
SVG圖形：一、矩形<rect style="fill:yellow;" width="300" height="100"/> 
二、圓<circle style="fill:blue;stroke:red;"cx="200"y="200"r="100"/> 
  
<path style="fill:blue;stroke:red;"d="M200,100c0,55.23-44.77,100-100,100S0,155.23,0,100S44.77,0,100,0s100,44.77,100,100z"/> 
  
SVG路徑(path):路徑使用下面的屬性來描述:"moveto" 設置新的座標點 "lineto" 畫一條直線 "curveto" 使用貝賽爾函數畫制曲線 "arc" 畫橢圓和圓 "closepath" 閉合路徑 
  
<path d="M 50 10 L 350 70 L 100 120 z"/>"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 <path style="stroke-dasharray:12 12">虛線筆劃定義了使用虛線的虛化程度 
  
SVG梯度(Gradients):梯度是填充和筆劃屬性的一個特殊應用。梯度能夠產生用矢量完成的色彩漸變。SVG支持線式的(linear)和圓式的(radial)色彩梯度變化。 
  
梯度屬性的實現利用了(defs)標籤(元素),這個標籤包含了填充和筆劃屬性,由此,能夠給物件加入特別的效果。結合下面的代碼和例子,體會(defs)標籤的含義和使用。 
  
<defs>   <radialGradient id="gradient1" cx="150.0005"cy="100" r="113.7914" fx="150.0005" fy="100"> <stop offset="0.19" style="stop-color:#FFFF00"/> <stop offset="0.4782" style="stop-color:#FFD00D"/> <stop offset="1" style="stop-color:#FE7312"/>   </radialGradient></defs> 
  
SVG濾鏡:<svg width="4in" height="3in">  <defs>    <filter id="CoolTextEffect">      <!-- Definition of filter goes here -->    </filter>  </defs>  <text style="filter:url(#CoolTextEffect)">Text with a cool effect</text></svg> 
  
兩個關鍵的屬性就是SourceGraphic和SourceAlpha.SourceGraphic表示了須要被濾鏡的原始物件,例如圖形,文 本.SourceAlpha和SourceGraphic屬性上基本相似,但包含了一個alpha通道。這樣能夠經過alpha通道的值實現濾鏡的功能。 
　　經過簡單濾鏡的組合,還能夠產生更加豐富和多樣的效果來。通常,圖像濾鏡效果的產生首先是結合簡單濾鏡造成總的效果真後疊加入圖像中產生最終圖像。 
<filter id="MyFilter"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <feOffset in="blur" dx="4" dy="4" result="offsetBlurredAlpha"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="specularOut">   <fePointLightx="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="specularOut" in2="SourceAlpha"operator="in" result="specularOut"/> <feComposite in="SourceGraphic" in2="specularOut"operator="arithmetic" k1="0" k2="1" k3="1"k4="0" result="litPaint"/> <feMerge>  <feMergeNode in="offsetBlurredAlpha"/>  <feMergeNode in="litPaint"/> </feMerge></filter> 
  
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顏色動畫的屬性. 

<animateColor attributeName="fill" attributeType="CSS" values="red;blue;yellow;green;red" dur="10s" repeatCount="indefinite" />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定義了貝賽爾曲線的關鍵控制點,來控制動畫的變化.這樣的控制容許平滑的產生變化(相似於淡入淡出的平滑效果),這一點在動畫中很是重要.