vml簡介
VML(Vector Markup Language)
是一個最初由Microsoft開發(fā)的XML詞表,現(xiàn)在也只有IE5.0以上版本對VML提供支持。使用VML可以在IE中繪制矢量圖形,所以有人認為VML就是在IE中實現(xiàn)了畫筆的功能。下面介紹一下VML的優(yōu)點:
基于XML標準
XML是公認擁有無窮生命力的下一代網(wǎng)絡(luò)標記語言, VML具有先天的優(yōu)勢,它的表示方法簡單,易于擴展等等。
支持高質(zhì)量的矢量圖形顯示
VML支持廣泛的矢量圖形特征,它們基于由相連接的直線和曲線描述路徑。在VML中使用兩個基本的元素:shape和group。這兩個元素定義了VML的全部結(jié)構(gòu);shape描述一個矢量圖形元素,而group用來將這些圖形結(jié)合起來,這樣它們可以作為一個整體進行處理。
VML規(guī)范包括大量的支持多種不同矢量圖形特征的元素。下面是VML的預定義圖形元素:
l Shape
l Path
l Line
l Polyline
l Curve
l Rect
l Roundrect
l Oval
l Arc
l Group
由文本構(gòu)成的圖像,并可集成到HTML
由于VML使用簡單的文本來表示圖像,這樣就可用很少的字節(jié)來表示比較復雜的圖像。VML與HTML兼容,通過在HTML中聲明VML命名空間并聲明處理函數(shù),就可以和其他HTML元素一樣使用VML元素,在客戶端瀏覽器顯示圖像。VML標記里面可以定義DHTML大部分屬性和事件,比如說id, name, title, onmouseover 等等。
支持交互與動畫
但VML的功能不只是繪圖,他還可以在圖形中嵌入文本,并可實現(xiàn)超鏈,還可通過腳本語言實現(xiàn)一定的動畫功能。
VML是The Vector Markup Language的縮寫。
參考網(wǎng)站
MSDN:http://msdn.microsoft.com/workshop/author/vml/shape/introduction.asp
W3C:http://www.w3.org/TR/NOTE-VML
首先需要在<HTML> 標簽中加上如下引用
<HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> ... </HTML> |
如果沒有您沒有用到OFFICE的擴展功能的話,您可以忽略第二個schema。
同時,您需要在STYLE元素中注冊VML和Microsoft Office Extensions
v\:* { behavior: url(#default#VML); } o\:* { behavior: url(#default#VML); } |
如果沒有您沒有用到OFFICE的擴展功能的話,您可以忽略第二個樣式的定義。
下面說說常用的幾個元素
1.Shape元素
用法:<v:shape ...></v:shape>
它的常用屬性:
FillColor:圖象填充色。
標簽語法:
<v:element fillcolor="expression">
腳本語法:
element.fillcolor="expression"
expression=element.fillcolor
Path:指定繪畫的路徑
腳本用法:
<v:shape id="rect01"
fillcolor="red" strokecolor="red"
coordorigin="0 0" coordsize="200 200"
style="position:relative;top:1;left:1;width:20;height:20"
path="m 1,1 l 1,200, 200,200, 200,1 x e">
</v:shape>
說明:用字母m(moveto命令)定義圖象初始點的坐標,例子中為(1,1)
用字母l(小寫的L字母,lineto命令)開始畫線,先畫到(1,200),再畫到(200,200),再畫到(200,1)
用字母x(close命令)關(guān)閉線條
用字母e(end命令)結(jié)束
注意:每兩個數(shù)字組成一個坐標
Title:鼠標移動到圖象上時的提示文字
Style:圖象的樣式
Filled:決定閉合路徑中是否需要填充(True/False)
StrokeColor:圖象路徑的顏色
2.Shape元素有效的子元素
TextBox:在圖象中定義一個文本框
用法:
<v:shape>
<v:textbox>VML</v:textbox>
</v:shape>
TextPath:設(shè)置文字路徑,要使用該屬性,path屬性的TextPathOK一定要為true;并且TextPath的on屬性要為true
詳細說明文擋請上參考網(wǎng)站查閱?。?!
簡單的例子:
<HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <HEAD> <STYLE> v\:* { behavior: url(#default#VML);} o\:* { behavior: url(#default#VML);} </STYLE> <TITLE>VML Sample</TITLE> </HEAD> <BODY> <v:shape fillcolor="green" style="position:relative;top:1;left:1;width:200;height:200" path = "m 1,1 l 1,250, 250,500, 500,500, 500,250, 250, 1 x e" title="test" strokeColor="yellow"> <v:fill type='gradient' id='fill1' color='red'/> <v:textbox>VML</v:textbox> </v:shape> </BODY> </HTML> |