檢視 SVG 的原始碼

[[分類:HTML]]
Scalable Vector Graphics(可縮放向量圖形)
*特性
*#XML語法。
*#二維向量圖形格式。
*#由W3C制定，是開放標準。
==語法==
[http://www.w3schools.com/svg/ 自主練習站]
===宣告圖檔===
<nowiki><</nowiki>?xml version='1.0' encoding='UTF-8' standalone='no'?>

===標籤===
*svg(成對)：svg 開始及結束。屬性有：xmlns(如http://www.w3.org/2000/svg)，version(如1.1)，width，height
====向量圖形標籤====
*共同約定：
*#開始與結束合一。
*#長度如省略單位，預設單位為 px。
*#px可以使用小數點。
*#以左上為座標原點。
*#座標描述先 x 後 y 。
*#stlye屬性中關於線條之樣式：
*#*stroke (線條顏色)，
*#*stroke-width (線條寬度)，
*#*stroke-opacity (線條顏色的透明度，合法的範圍是：0 - 1，0最透明)，
*#*stroke-linecap (線條端點形狀，預設butt端點切齊、round以端點為圓心線寬為直徑畫圓、square以端點為中心線寬為邊長畫方形)，
*#*stroke-linejoin (兩線條接處樣式，預設miter尖角的屬性、round圓角、bevel斜角)，
*#*stroke-miterlimit(斜接限制)，
*#*stroke-dasharray (其值為一陣列，陣列值為線段中實線段長度與虛線段長度的交錯數字，通常是兩個數字一組，如果是奇數，則最後面自動加補為第一個數字)
*#stlye屬性中關於面之樣式：
*#*fill (填充顏色)，
*#*fill-opacity (填充不透明，合法的範圍是：0 - 1，0最透明)。
*#選擇器 class,id 同 CSS 。 
#line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第一點y座標)。
#polyline(多點成線)，諸屬性如下：
#*points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
#polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下：
#*points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
#circle(圓)，諸屬性如下：
#*cx(圓心x座標)，cy(圓心y座標)，r(半徑)
#rect(矩形)，諸屬性如下：
#*width(寬)，height(高)，省略起點則以原點為起點，x(起點x座標)，y(起點y座標)，rx(圓角x半徑)，ry(圓角y半徑)
#ellipse(楕圓)，諸屬性如下：
#*cx(中心x座標)，cy(中心x座標)，rx(x軸半長)，ry(y軸半長)。
#path(綜合)，[http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html 語法說明]

====文字====
*text開始與結束之間夾字，可用中英文。
*用 style 控制字體、字形。

====嵌入外來====
#foreignobject 開始與結束之間夾&lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;…&lt;/body&gt;，body 中再夾如 table 等 HTML code 。
#*屬性有：x嵌入物x座標，y嵌入物y座標，width嵌入物寬，height嵌入物高。

====濾鏡====
====漸層====
====transform 坐標變換方式====
*代碼：&lt;g transform="..."&gt;  &lt;!--other elements&gt;  ...&lt;/g&gt;
#平移變換(translate)：transform="translate(x,y)"，即新坐標系的原點在原坐標系的(x,y)處。坐標軸的方向不變。
#旋轉變換(rotate)：transform="rotate(angle cx,cy)"。angle代表旋轉角度，缺省單位是「度」，順時針為正，逆時針為負。(cx,cy)是旋轉中心所在的坐標。若省略旋轉中心坐標，則缺省值是(0,0)。
#伸縮變換(scale)：transform="scale(sx,sy)"，sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子。拉伸：大於1；縮小：小於1。若省略sy，即sy=sx，作等比例縮放。
#歪斜變換(skew)：transform="skewX(x-angle)"或transform="skewY(y-angle)"，x-angle,y-angle分別代表沿x軸和y軸歪斜的角度。
#矩陣變換(matrix)：transform="matrix(a b c d e f)"，這裡的六個參數分別是變換矩陣中的六個參數。特點是靈活性大，無論多麼複雜的變換，只需進行一次矩陣運算即可。

====動畫====
*[http://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx 基本 SVG 動畫]

====其他====