VML簡介
1 VML概述
在VML裏面，標記使用的是XML擴張，需要一個namespace(命名空間)，你可以使用慣用的“v”作爲命名空間，使用IE5.0到IE6.0通用的定義如下:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v/:* { Behavior: url(#default#VML) }
</STYLE>
xmlns 全稱就是XML NameSpace 也就是命名空間。Behavior(行爲)也是IE5.0新推出的東西，它的功能非常強大，結合樣式表，可以給任何HTML對象增加行爲（新的屬性、方法、事件），而在這裏，它的用處是把命名空間“v”和系統預定義的行爲VML連接。這樣定義以後，你就可以使用下面的標記了，和普通的HTML標記有所區別，每個標記都增加了一個命名空間：
<v:shape></v:shape>
和其他HTML元素一樣，VML標記裏面可以定義DHTML大部分屬性和事件，比如說id，name，title，onmouseover等等。在寫法上VML比較靈活，很多屬性既可以寫在標記裏面，又可以獨立出一個新的標記來表示:
<v:shape id=shape1 name=shape1 onmouseover="alert(this.id)" StrokeColor=red Path="m 0,0 l 10,10 x e">
</v:shape>
等同於下面的寫法:
<v:shape id=shape1 name=shape1 onmouseover="alert(this.id)">
<v:Stroke StrokeColor=red/>
<v:Path v="m 0,0 l 10,10 x e"/>
</v:shape>
當然不是所有的屬性都可以寫成獨立的標記，常用的比如說上面的 Stroke(按我的理解可以翻譯成線性)，Path，Shadow，Fill(填充)等，VML這樣的方式可以理解爲 shape 的屬性分類，使屬性更直觀。
Shape 對象派生出來的一些對象，更加直接的圖象，比如說 Rect(矩形)，RoundRect(圓邊的矩形)，Oval(圓)，Line(線)，PolyLine(不規則折線)，Image(圖形文件)等等，以後將對這些對象細細描述。
2語法
VML標記是從XML衍生出來，因而採用的都是符合XML規範的標籤。在標籤中，屬性和元素不區分大小寫。True和False可以簡寫爲t和f。
2.1 shape圖形
Shape是VML最基本的對象，利用它可以畫出所有想要的圖形。在VML中，使用的座標並不是Document的座標，它有自己的座標系，這樣一來，動態改變它的座標，就可以實現放大、縮小、旋轉等功能了。shape的 CoordSize 屬性就是用來定義座標的，它有兩個參數，<v:shape CoordSize="2800,2800" />，這裏的2800,2800是橫縱座標被分成了2800個點，並不是HTML裏面默認像素。如果沒有設置圓點，VML默認是0,0（左上角），當然你也可以使用CoordOrig屬性設置VML的圓點座標。
<v:shape CoordOrig="-1400,-1400" CoordSize="2800,2800" style="width:500;height:500" />
注意：定義的座標只是相對的，真正顯示的圖形大小還需要 style="width:500;height:500" 來定義！
上面的定義後，你可用的座標是 x(-1400到1400) y(-1400到1400) ，這樣的座標就像數學裏面的座標了，把畫版分成了四個塊。
shape中最主要的屬性是Path，它是個功能強大的畫筆，語法很簡單，由幾個字母組成，下面詳細講述：
m x,y：MoveTo把畫筆移動到 (x,y)；
l x,y：LineTo從當前點到(x,y)畫一條線；可以給連續的幾個點，VML會連續畫出來直到遇到 x 命令。
x：Close結束一條線；
e：End結束畫圖。
shape的其他常用屬性:
FillColor：填充顏色，使用HTML中規定的顏色；例如：fillcolor=red
Filled：是否要填充圖形，如果圖形不是封閉的，也會自動封閉圖形進行填充。當Filled="true"(默認)，fillcolor纔有效果；
StrokeColor：線的顏色；
StrokeWeight：線的寬度；
Title：當鼠標移動到該圖形上的時候，顯示的文字，和HTML裏面的alt、tilte一樣；
Type：指定該圖形屬於那個ShapeType，ShapeType可以爲VML制定模版，將在以後加以描述；
前面的這些屬性，FillColor、Filled可以在<v:Fill />中使用，StrokeColor、StrokeWeight可以在<v:Stroke />中使用。也可以在 Shape 或者繼承Shape的對象中使用它。
2.2 ShapeType
定義shape的模版，在應用中可以重複使用。
<v:shapetype id="arrowDown" coordsize="6 6">
<v:path v="m 0,0 l 3,6,6,0,0,0 x e" />
</v:shapetype>
定義ShapeType時需要指定id，在後面使用ShapeType需要指定對應shape的type爲#arrowDown就可以使用ShapeType模版。
注意：
Adj屬性的用法，需要與v:formulas結合起來使用。Adj中的參數順序爲#1，#2，…#n，formulas中的順序爲@1，@2，…@n。
2.3 Line線段
用法：
<v:line style="position:relative" from="0,0" to="100,0" >
<v:stroke dashstyle="Dot"/> <!—線風格-->
</v:line>
線顏色、風格定義可以通過v:stroke來設定。
2.4 PolyLine不規則折線
用法：
<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative"/>
<v:stroke StartArrow="Oval" EndArrow="Classic" dashstyle="Dot" />
</v:PolyLine>
IE5.0不支持箭頭，如果設置填充爲true那麼對應的多邊形必須是閉合才能顯示填充顏色。
2.5 Rect矩形
用法：
<v:Rect style="position:relative;width:100;height:50px"/>
2.6 RoundRect圓角矩形
用法：
<v:RoundRect style="position:relative;width:100;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
</v:RoundRect>
Arcsize 圓角的大小默認爲0.2。
2.7 Oval橢圓
用法：
<v:oval style="position:relative;left:5;top:5;width:100;height:80"/>
需要注意的是，top和left是圓的左上角座標，width 和 height 是圓的寬和高，不是圓的半徑。其圓心座標是(left-width/2，top-height/2)。
2.8 Arc弧
用法：
<v:arc filled=false style="position:relative;width:100;height:100" StartAngle="0" EndAngle="270" />
注意：
0角度是從平常的90度開始的。
2.9 Fill填充
相關屬性及說明：
屬性名稱
說明
id
唯一編號
type
填充類型，可以是“solid | gradient | gradientradial | tile | pattern | frame”，“Tile”， “pattern”和“frame”要求必須設置Image屬性。“Gradient”，“gradientradial”和“gradienttitle”要求gradient屬性必須設置。
On
是否加載填充
color
填充顏色
Color2
漸變中的第二顏色
opacity
透明度
Image屬性
Src
圖片對應的url地址
Size
圖片大小。默認爲自動
Origin
與左上角相對位置作爲圖片的左上角。默認爲圖片中心點。
position
外接矩形放置圖片的位置。默認爲“auto”
alignshape
與圖形對齊
漸變相關屬性（gradient）
colors
不同顏色在漸變中所佔比例如（30% red， 70% blue）
Angle
漸變起始角度
Focus
線形漸變的焦點
focussize
focusposition
method
“none”，“linear”，“sigma”或者"any"
2.10 Stroke
相關屬性及說明：
Id
唯一標識
On
是否加載樣式默認爲true
Weight
線寬度
color
顏色
Color2
用於漸變顏色中的第二顏色
Opacity
透明度
style
樣式"single", "thinthin" (1:1:1), "thinthick", (1:1:2) "thickthin" (2:1:1), "thickbetweenthin" (1:1:2:1:1)
miterlimit
連接點處內點和外點的最大距離
joinstyle
"round" – rounded join, "bevel" – beveled join, "miter" – miter join，默認爲“round”
Endcap
“flat”，“square”，“round”，默認爲“round”
dashstyle
線樣式（“solid| dot| dash| dashdot| longdash| longdashdot| longdashdotdot”），默認爲“solid”
filltype
填充類型（"solid", "tile", "pattern", "frame"），默認爲“solid”
Src
imagesize
imagealignshape
startarrow
起始箭頭風格
startarrowwidth
startarrowlength
endarrow
結束箭頭風格
endarrowwidth
endarrowlength
2.11 Path
在path中既包含了點座標的信息也包含對應的命令信息常用的有以下命令：
m 移動到指定位置。
l 從前面一點畫一條線到指定的座標位置。
c 從當前點畫弧線到指定座標位置。
x 線段閉合，即從當前點與起始點建立線段連接形成閉合圖形。
e 畫線結束。
如path=“m 3，0 l 0，6 6，6 3，0 x e”表示的是從（3，0）點出發先畫一條線到（0，6），然後再畫一條線段到（3，0），x表示閉合即從（3，0）到起點再畫一條線段，最後e表示畫線結束。