VML畫連線箭頭，line線加粗

原創 yinxianluo 2020-02-25 03:36

var div=document.createElement("div");
  div.innerHTML=' <div id="line_div" style="width:'+width+'px;height:'+height+'px;position:absolute;visibility:visible;left:'+left+'px;top:'+top+'px;border-left:1px solid #cdcdcd;border-top:1px solid #cdcdcd;"></div>';
  document.body.appendChild(div);


一、什麼是VML

VML相當於瀏覽器的畫筆，它可以在瀏覽器中畫出任何你想要的圖形：小到直線、圓形、圓弧、曲線、矩形、圓角矩形、多邊形；大到一張圖畫、一個動畫、甚至於一個遊戲。題中既以標明爲簡明教程，下邊我們只限於討論使用VML在瀏覽器中畫一些直線、圓形、圓弧等小圖。

VML是微軟1999年前(具體時間不詳)製作推出的，並集成到了IE5+瀏覽器，同樣也是Microsoft Office Art(藝術圖型,如word的藝術文字)的核心結構。VML由微軟Visio、Autodesk、Macromedia等企業推薦給W3C(WWW最高權利協會)，W3C採取、綜合了各方的推薦，於1999年初開始發展SVG，並隨後不久推出。SVG是綜合VML、GML等的改進(輸出效率、圖型質量、標記擴展)，被推薦爲標準，但SVG需要專門的圖像閱讀器如(Adobe SVG Viewer)，無法直接被瀏覽器引擎解析，以我見，SVG更適合於精度矢量圖型應用軟件開發、VML則適合應用在WEB頁，有不少文章說VML已過時，但仁者見仁、智者見智，VML我感覺相當健全(圖型質量、輸出速度)，它編寫簡單、瀏覽器可以解析、與HTML等語言完全兼容，它更具有實際WEB頁應用的可行性、深層開發的可行性。但遺憾的是目前支持VML的瀏覽器僅有IE。

二、VML基礎知識

如果你熟悉HTML的話，那麼學VML並不是一件複雜的事，因爲VML和HTML幾乎一樣，不僅表現在語法上，還有其對CSS、JS的支持都和HTML如出一轍。

1.基本語法
·標籤以<V:XXX>開頭</V:XXX>結尾，也支持空標籤如<V:XXX />
·標籤不區分大小寫
·標籤中間可嵌套其他標籤，可以是VML，也可以是HTML
·屬性的寫法爲"parameter=value"，如<V:XXX parameter="value"></V:XXX>，屬性值可加雙引號、單引號、也可不加

2.對CSS和JS的支持
·對CSS支持：<V:XXX style="parameter1:value1;parameter2:value2"></V:XXX>

3.VML文件擴展名
·可以是htm、html、asp、php、jsp等，即網頁格式

4.VML編輯器
·任何文本編輯器都可以，如記事本、Editplus、Dreamweaver，也有專業的工具如FlashVml3.0

5.一個簡單的範例

程序代碼 程序代碼
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>第一個VML範例</title>
<style>
v/:* { behavior: url(#default#VML);} 
o/:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:line style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
</body>
</html>


說明：
·xmlns:v="urn:schemas-microsoft-com:vml" //關鍵語句，表示創建一個叫v的XML命名空間，其中v可自行修改
·xmlns:o="urn:schemas-microsoft-com:office:office" //表示引用office相關的標記處理擴展，WEB中很少用，下邊不講
·v/:* { behavior: url(#default#VML);}    //關鍵語句，指明XML名域v引用的數據是VML標記語言
.<v:line style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/> //創建一條直線，VML在瀏覽器中畫圖的語句都是寫在<BODY></BODY>之間

三、通用屬性

下邊這些屬性大部分的VML標籤中都是可用的，爲了便於記憶將其分成了三類，其中第二類和HTML相同、第三類和CSS相同。

1.line(直線)

a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一條從(0,0)到(200,200)的紅色的邊框爲2px的直線</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:line strokecolor="red" strokeweight="2" style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
</body>
</html>

b.專用屬性：from    起點座標；
                    to    終點座標
2.Oval(圓)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一個寬400高400邊框爲紅色填充爲綠色的圓</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:Oval strokecolor='red' fillcolor='green' style='width:400;height:400'/>
</body>
</html>b.專用屬性：無
c.其他說明：其高寬主要由style中的width和height決定

3.rect(矩形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一個寬100高100的矩形</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:rect style="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/>
</body>
</html>

b.專用屬性：無
c.其他說明：其高寬主要由style中的width和height決定
4.roundrect(圓角矩形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一個圓角矩形</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:roundrect style="position:absolute;z-index:1;left:220;width:100;top:100;height:100" fillcolor="red" strokecolor="red" strokeweight="1px" arcsize="0.15"/>
</body>
</html>

b.專用屬性：arcsize    描述圓矩形四角的弧度值，0-0.5，默認值0.05
c.其他說明：其高寬主要由style中的width和height決定
5.arc(圓弧)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一個圓弧</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:arc style="z-index:1;left:110;width:100;position:absolute;top:10;height:100" startangle="-180" endangle="0"/>
</body>
</html>

b.專用屬性：startangle    圓弧的起點缺口，取值範圍-360-360，默認值-180；
                    endangle    圓弧的終點缺口，取值範圍-360-360，默認值null(0)
c.其他說明：其高寬主要由style中的width和height決定
6.polyline(多邊形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一個多邊形</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:polyline style="z-index:1;left:71;position:absolute;top:225" points="0,0,30,-40,100,100,0,0" filled="t" fillcolor="white"/>
</body>
</html>
b.專用屬性：points    各折點座標，上例表示(0,0)、(30,-40)、(100,100)、(0,0)四個點

7.curve(曲線)

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一條曲線</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:curve style="z-index:1;left:100;position:absolute;top:300" from="0px,0px" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/>
</body>
</html>

b.專用屬性：from    起點
                    to       終點
                    control1    曲線的第一個曲度
                    control2    曲線的第二個曲度
c.其他說明：control1、control2可用都不用、用一個或用兩個都用
8.shape(任意形狀)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建任意曲線</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 e"/>
<v:shape style="width:100;height:100" coordsize="50,50" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 x e"/>
</body>
</html>
b.專用屬性：path    路徑(m    起點、 l     畫直線、 c    畫曲線、x    曲線自動閉合、 e    結束)
                   coordsize    比例(實際寬:width*100/coordsize第一個值；實際高:height*100/coordsize第二個值)
                   type    引用模板的名稱
9.shapetype(模板)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>模板使用示例</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:ShapeType id="m1" coordsize="1000 1000" fillcolor="yellow">
<v:Path v="m0,0 l30,-30,60,0,0,0 e"/>
</v:ShapeType>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:225;height:1000" type="#m1"/>
<v:Shape style="z-index:1;left:371;width:2600;position:absolute;top:225;height:4600" type="#m1"/>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:300;height:1000" type="#m1" fillcolor="red"/>
</body>
</html>
b.其他說明：shapetype是專門用來定義形狀摸版的（不可見），而後在由shape標記引用、將模版實例化的按照path子屬性值輸出多邊形（可見）。
10.background(背景)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>背景示例</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:background fillcolor="white">
<v:fill angle=50 type='gradient' color2="yellow"/>
</v:background>
</body>
</html>
11.group(容器)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>容器示例</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:group id="group1" style='position:absolute;left:0;top:0;z-index:1;width:100;height:100' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>

<v:group id="group2" style='position:absolute;left:100;top:100;z-index:1;width:100;height:100' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>

<v:group id="group3" style='position:absolute;left:100;top:100;z-index:1;width:200;height:200' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>
</body>
</html>
b.其他說明：當使用group後，容器內圖形的left、top、width、height等值都是相對group的值。

五、二級標記
二級標記可以看作是對有限的屬性進行擴展，就像CSS和HTML的關係一樣，利用它我們可以做出更漂亮的圖畫出來，如上邊background(背景)中就使用了fill二級標記，下邊我們再來看下如何利用二級標記畫一條帶箭頭的直線：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>二級標記示例</title>
<style>
v/:* { behavior: url(#default#VML);} 
</style>
</head>

<body>
<v:line style="z-index:5;position:absolute;left:200;top:200" to="0,150" strokecolor="red" strokeweight="10px">
<v:Stroke dashstyle="shortdot" endarrow='classic'/>
</v:line>
</body>
</html>
例子中的stroke即爲二級標記，它可以用來設置邊框樣式，除此之外還有shadow(陰影)、fill(填充)、extrusion(立體3D)、textbox、imagedata(背景圖片)等二級標記。二級標記也有自己的屬性，我們只須通過設置這些屬性就能畫出各種漂亮的圖來。二級標記的使用也非常簡單，直接嵌套於圖形標籤中即可

js vml 畫圖
2008-10-28 21:00

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>WawaMind beta v1.0</title>
</head>
<style type="text/css">
v/:* { BEHAVIOR: url(#default#VML) }
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
cursor:default;
width:1000px;
}
.wen{
   padding-top:3px;
   padding-left:3px;
   padding-bottom:3px;
   padding-right:3px;
   FONT-SIZE: 9.2pt; LINE-HEIGHT: 20px;
   BACKGROUND-COLOR: #99ccff;
   BORDER-BOTTOM: #330099 1px solid; 
   BORDER-LEFT: #330099 1px solid; 
   BORDER-RIGHT: #330099 1px solid; 
   BORDER-TOP: #330099 1px solid; 
   /*filter:Alpha(Opacity="80",FinishOpacity="90",Style="0");*/
   cursor:move;
   z-index:100;
   
}
.editdiv
{
    OVERFLOW: auto; background-color:#fff999; cursor:default;
    height:50px;
}
.editdiv p
{
margin:0;
}
.expanbutton
{
cursor:hand; font-weight:bold; font-size:20px;
}
</style>
<script type="text/javascript">
var xx=0,yy=0,oldvalue="",poly1,zz=1 
//有關移動的過程和函數
var dragapproved=false
var eventsource,x,y
var popeventsource=""
var Pencil = true;
var selectObj,selectObjBorder = null;

//頁面雙擊創建編輯框
function dbClick() {
    if (event.srcElement.className!="body") return;
    var markhtml ="<div class='wen' style='position:absolute;left:"+window.event.offsetX+";top:"+window.event.offsetY+";width:150px;z-index:9'></div>";
    var newMark=document.createElement(markhtml);
    document.body.appendChild (newMark);
    newMark.innerHTML = "<span class=/"expanbutton/" οnclick=/"expandMemo(this)/">-</span><span></span><div class=/"editdiv/" contentEditable=true onselectstart=/"event.cancelBubble=true/"></div>";
    newMark.fromline = new Array();
    newMark.toline = new Array();
}

//鼠標按下
function msDown() {
    if(event.button==1){
        var isclickScroll= (event.y < 0 || event.y > document.body.clientHeight 
            || event.x < 0 || event.x > document.body.clientWidth)
        if(selectObj){ //清空選擇
                selectObj.style.borderStyle = selectObjBorder;
                selectObj = null;
        }
        if(event.srcElement.className=="wen" ||
           event.srcElement.tagName == "curve" ||
           event.srcElement.tagName == "shape"
           ) //選擇要刪除的對象
        {
            selectObj = event.srcElement;
            selectObjBorder = selectObj.style.borderStyle;
            selectObj.style.borderStyle = "dotted";
            selectObj.style.borderWidth = "1px";
            
        }
        if (event.srcElement.className=="wen")
        {
            if(event.shiftKey) //畫兩個物體間的線
            {
                eventsource=event.srcElement;
                return;
            }
            dragapproved=true //拖動物體
            eventsource=event.srcElement
            temp1=eventsource.style.pixelLeft
            temp2=eventsource.style.pixelTop
            x=event.clientX
            y=event.clientY
        }else{ //鉛筆
             dragapproved=false;
             if (event.srcElement.className!="body" || isclickScroll) //防止在物體上畫線
             {

                 Pencil = false;
                 return;
             } 
             Pencil = true;
            document.body.setCapture(); 
            color1="red"
            size1=1 
            xx=event.offsetX;yy=event.offsetY;zz+=1
            poly1=document.body.appendChild(document.createElement("<v:shape filled=false path='m0,0 l0,0' style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";width:100;height:100' strokecolor='"+color1+"' strokeweight='"+size1+"' coordsize='100,100'/>")) 
            oldvalue=poly1.path.value.replace("e","") 
        }
    }
}
//鼠標移動
function msMove() {
    if(event.button==1)
    {
        if(event.shiftKey) //畫兩個物體件的線
        {
            return;
        }
        if(dragapproved){ //拖動物體
            var newleft=temp1+event.clientX-x
            var newtop=temp2+event.clientY-y
            eventsource.style.pixelLeft=newleft
            eventsource.style.pixelTop=newtop
            
            //移動線
            for(var i = 0; i< eventsource.fromline.length;i++)
            {
                eventsource.fromline[i].from = newleft +","+ newtop;
            }   
            for(var i = 0; i< eventsource.toline.length;i++)
            {
                eventsource.toline[i].to = newleft +","+ newtop;
            }        
        }
        else if(selectObj && selectObj.tagName == "curve")
        { //調整曲線
            if(!event.altKey)
                selectObj.control1 = event.x+","+event.y;
            else
                selectObj.control2 = event.x+","+event.y;
        }
        else{//鉛筆功能
            if (event.srcElement.className!="body") return; //防止在物體上畫線
            if(Pencil)
            {
                oldvalue+=","+(event.offsetX-xx)+","+(event.offsetY-yy);
                poly1.path.value=oldvalue 
                poly1.path.value=poly1.path.value.replace(",0,",",").replace(",0 e","e")     
            }
        }        
    }
}
//鼠標彈起
function msUp() {
document.body.releaseCapture(); 
    if (event.shiftKey && event.srcElement.className=="wen") //畫兩個物體見的連線。
    {
        var target = event.srcElement;
        var newline=document.createElement("<v:curve filled=/"false/" from="+eventsource.style.pixelLeft+","+eventsource.style.pixelTop+"/" to=/""+target.style.pixelLeft+","+target.style.pixelTop+"/"></v:curve>");
        document.body.insertBefore(newline);
        eventsource.fromline[eventsource.fromline.length] = newline;
        target.toline[target.toline.length] = newline;
    }
}
//控制編輯框的展開和收縮
function expandMemo(o)
{
    var expand = o.innerText == "+";
    var text = o.parentNode.childNodes[2].innerText;
    o.parentNode.childNodes[1].innerText = expand ? "":text.substring(0,10);
    o.parentNode.childNodes[2].style.display = expand ? 'block':'none';    
    o.innerText = expand ? "-" :"+";
}
function keyDown() {
if(event.keyCode == 46) //刪除
{
    if(selectObj)
    {
       document.body.removeChild(selectObj);
       selectObj = null;
    }
}
}
document.onkeydown = keyDown 
</script>
<body class="body" οndblclick="dbClick()" οnmοusedοwn="msDown()" οnmοusemοve="msMove()" οnmοuseup="msUp()" onselectstart="return false;">


</body>
</html>


地址欄裏面輸入：
javascript:document.body.innerHTML%20=%20"<textarea%20style='height:300;%20width:90%'>"+document.body.innerHTML+"</textarea>"    
可以查看運行時生成的html

VML的全稱是Vector Markup Language(矢量可標記語言)是基於xml的矢量的圖形，意味着圖形可以任意放大縮小而不損失圖形的質量。微軟ie5-8的矢量圖標準。由於ie9已經支持SVG了，所以vml到2011年12月已經歸檔不再更新了，也就是說vml已經在慢慢退出市場，在此我講這個的原因是雖然退出市場了，但是ie5-8仍舊佔據絕大部分的市場，我們不能小視。某種角度看vml的用戶更多。我們可以展望未來，但還是不能忘記現在的環境。
用法：
1,添加xml的命名空間 xmlns ，寫法如下：
[html] view plaincopy
  1. <html xmlns:v="urn:schemas-microsoft-com:vml">  
2,添加行爲和命名空間的關係，至於這句話的意思後面有詳細解釋
[html] view plaincopy
  1. <style>v\:*{behavior:url(#defualt#vml);display:inline-block}</style>  
有了上面的兩個步驟我們就可以開始用vml“畫畫了”。
先上一個例子再解釋你就明白箇中奧妙了：
[html] view plaincopy
  1. <html xmlns:v="urn:schemas-microsoft-com:vml">  
  2. <head>  
  3. <title>vml</title>  
  4. <style>v\: * {behavior:url(#default#vml);display:inline-block}</style>  
  5. </head>  
  6. <body>  
  7. <v:oval style="width:50px;height:50px" fillcolor="red"></v:oval>  
  8. </body>  
  9. </html>  

一個簡單的圓就畫好了，這裏面的v\:* 是一個css樣式，表示所有以"V:"開頭的標籤的dom元素都繼承了這個樣式，樣式內容就是將vml的默認行爲給這些元素，既然是繼承樣式以前我們經常用class繼承，這裏也是完全可以的，至於後面的display:inline-block,其實是對ie8樣式的兼容問題（經過我測試好像加不加這句ie8顯示無礙，既然官方給出這樣的寫法，自有道理，可能是不同版本當時的兼容問題，也可能後期ie8修復了，在此就不多糾結）。這樣一來凡是"v:"開頭的標籤都有了vml的默認行爲，那麼我們就可以用vml的方式添加屬性了，下面我會開始介紹vml的一些形狀以及屬性。
在此之前我想很多人可能覺得這樣通過標籤畫的矢量圖實在無趣，而且不實用，那麼我們就來點實用和令人興奮的東西，我們讓javascript將普通的html文檔動態創建出符合vml運行的環境。還是看例子：
[html] view plaincopy
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3. <title>vml</title>  
  4. </head>  
  5. <style type="text/css">  
  6. </style>  
  7. <body>  
  8. <script language="JavaScript" type="text/javascript">  
  9. window.onload = function(){  
  10.      var cont = document.getElementById('dv');  
  11.      var oval = document.createElement('oval');//創建元素  
  12.        
  13.      oval.xmlns="urn:schemas-microsoft-com:vml";//相當於上面的賦值命名空間  
  14.      oval.style.behavior='url(#default#VML); display:inline-block';//相當於上面添加vml默認樣式  
  15.   
  16.      oval.style.position = 'absolute';  
  17.      oval.style.width = '50px';  
  18.      oval.style.height= '50px';  
  19.       oval.fillcolor= 'red';  
  20.      cont.appendChild(oval);  
  21. }  
  22. </script>  
  23. <div id='dv'></div>  
  24. </body>  
  25. </html>  
我們就這麼很方便的動態創建了一個vml矢量圖，如果你有心而且追求擴展性的話，其實我們可以寫的更加美妙的js，比如通過：
[javascript] view plaincopy
  1. document.namespaces.add("v", "urn:schemas-microsoft-com:vml");  
添加document的命名空間，我們還可以創建style標籤添加樣式，然後appendChild到head標籤中。這樣是不是更好呢？如果暫時覺得太複雜可以跳過這一部分。
這裏應爲是基礎教程所以就不過多的擴展，以後我還會深入講解的。
vml圖形及屬性
如有興趣深入研究的話可以去msdn上面看看。下面是網址。
http://msdn.microsoft.com/en-us/library/bb250524(v=vs.85).aspx
我就是檢主要的，常用的給大家：
CoordSize：
[html] view plaincopy
  1. <html xmlns:v="urn:schemas-microsoft-com:vml">  
  2. <head>  
  3. <title>vml</title>  
  4. <style>v\: * {behavior:url(#default#vml);display:inline-block}</style>  
  5. </head>  
  6. <body>  
  7. <v:oval CoordSize='28000,28000' style="position:relative;left:5;top:5;width:100;height:80"/>  
  8. </body>  
  9. </html>  
CoordSize:其實是網格大小，當CoordSize爲 28000,28000 就是將橫縱座標和縱座標被分成了28000個點，這並不是HTML裏面默認像素。具體的形狀大小定義還要靠style中的width和height。寬和高都是指的多少個網格的寬和高，放大和縮小調整CoordSize的值就可以搞定。默認元素都是從左上角0,0處開始排放。
屬性：
屬性其實就是形狀的表現樣式，從下面開始我就不累贅的寫html結構了，如果測試代碼可以將上面的body中的代碼替換成我所給的代碼就行了。
[html] view plaincopy
  1. <v:line style="position:relative" from="0,0" to="100,0" >  
  2. <v:stroke dashstyle="Dot" EndArrow="Classic" />  
  3. </v:line>  
這種寫法是將屬性添加到單獨的標籤中。
stroke：畫筆屬性包括：
strokeweight，dashstyle，strokecolor，opacity="0.5"，linestyle線條風格，,joinstyle線條轉折樣式，filltype線條填充樣式。
dashstyle：
linestyle：single，thinthin，thinthick，thickthin，thickbetweenthin
詳細的可以自己試試，我給一個thickbetweenthin圖片，大家有個概念，是那一塊兒變了就行：
joinstyle：round，bevel，miter，完全可以理解爲筆觸樣式，也就是轉折地方的樣式，我也跟上面一樣不多截圖了：
以上就不詳細解釋，如果想深入瞭解就課看下面的鏈接吧，裏面都有，用的時候查就可以了。
http://msdn.microsoft.com/en-us/library/bb264134(v=vs.85)
fill： 填充顏色；
type：gradient,frame可以填充圖片,pattern,gradientRadial。
[html] view plaincopy
  1. <v:oval style='width:120pt;height:90pt' strokecolor="red"  
  2. strokeweight="2.5pt">  
  3. <v:fill type="frame" src="image1.jpg" />  
  4. </v:oval>  
method:linear,sigma,any,none 漸變方式。
angle角度 漸變角度。
v:shadow：陰影；
[html] view plaincopy
  1. <v:RoundRect style="position:relative;width:100;height:50px">  
  2.     <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>  
  3. </v:RoundRect>  
屬性ok了下面繼續我們的shape的擴展形狀上面講了直線下面接着說形狀，形狀其實都是由shape衍生出來的對象，shape是最基礎也是最強大的繪圖方式。下面先說說衍生出來的形狀。
形狀
直線：
[html] view plaincopy
  1. <v:line style="position:relative" from="0,0" to="100,0" >  
  2. <v:stroke dashstyle="Dot" EndArrow="Classic" />  
  3. </v:line>  

折線：
[html] view plaincopy
  1. <v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative" >  
  2. <v:stroke StartArrow="Oval" EndArrow="Classic" dashstyle="Dot" />  
  3. </v:PolyLine>  

折線就是給幾個點從第一個往後鏈接形成的。
圓形：
[html] view plaincopy
  1. <v:oval style="position:relative;left:5;top:5;width:100;height:80"/>  

通過left:5;top:5;width:100;height:80可控制長寬以及開始位置。
矩形：
分兩種一種是直角矩形：
[html] view plaincopy
  1. <v:rect style="position:relative;left:5;top:5;width:100;height:80"/>  

另一種是圓角矩形：
[html] view plaincopy
  1. <v:RoundRect style="position:relative;width:100;height:50px"></v:RoundRect>  

圖片：
[html] view plaincopy
  1. <v:image src="big.GIF" style="position:relative;top:0;left:0;width:165;height:157" />  

img也有很多特殊的屬性，可以控制明暗，圖片位置，透明度等
grayscale是否爲黑白色（true false），backlevel取值（-1，1),gain色相（數字）
圖片位置cropbottom, croptop, cropleft, and cropright （0~1）
最後的兩個是比較特殊的，不屬於形狀對象，可以理解成容器對象。
shapetype：
VML的這個功能很有用，模版，顧名思義，它可以減少書寫代碼的量，又使的代碼可讀性提高。在理解VML模版的時候，可以和 HTML 的 CSS 一樣理解，它是定義好的一種形狀，下次使用的時候直接聲明 type 屬性就可以了。看看下面的例子：
[html] view plaincopy
  1. <v:shapetype id="arrowUP" coordsize="6 6">   
  2.     <v:path v="m 3,0 l 0,6,6,6,3,0 x e" />  
  3. </v:shapetype>  
  4. <v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>  

用type指向上面shapetype的id就可以繼承下來定義的形狀。
group：
可以理解成一個畫布，我們可以修改畫布的CoordSize，或者Rotation 來改變畫布的屬性進而改變畫布裏面的圖形的展現。
[html] view plaincopy
  1. <v:shapetype id="arrowUP" coordsize="6 6">   
  2.     <v:path v="m 3,0 l 0,6,6,6,3,0 x e" />  
  3. </v:shapetype>  
  4. <v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>  
  5. <v:group style="position:relative;WIDTH:200px;HEIGHT:200px;rotation:45" coordsize = "2000,2000">  
  6. <v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>  
  7. </v:group>  

我們用group很簡單的改變了圖像大小和角度。
到此我們基本介紹了所有vml的對象和屬性，後面我會將shape的path專門提出來介紹，應爲實在太強大了，以至於我們瞭解了shape之後上面這些形狀我們完全都可以模擬出來。

 


1:2級標記的通用屬性 
        以前，我們常說的VML通用屬性，是針對像oval、rect、roundrect這樣的一級標記而言的（只是“極道”的學習規則，我不會在你還是一隻“VML菜鳥”時，用太多的一級標記、二級標記這些難懂的詞語）。而對於大多數的二級標記，是不支持的，只有一個例外，像Textbox內容，即能當作一級標記又能當作二級標記。不過id 這個通用屬性，是所有的一、二級標記均支持的屬性。
2:stroke邊框 - 專用屬性參考表

屬性名 默認值 值類型/範圍 用途 
on true boolean 設置處理是否起效 
weight 1pt number 描述邊框粗度 
color black color 描述邊框顏色 
opacity 1.0 0.0-1.0 描述邊框透明度 
dashstyle solid solid,dot,dash,dashdot,longdash,longdashdot,longdashdotdot,shortdot,shortdash,shortdashdot,shortdashdotdot 描述邊框的線條樣式 
filltype solid solid,tile,pattern,frame 描述如何填充邊框 
src null URLstring 當filltype!=solid時，指定填充邊框的圖像地址 
imagesize auto Vector2D 當filltype!=solid時，描述圖像放大倍數 
imagealignshape true boolean 當filltype!=solid時，描述圖像是否居中對齊 
color2 null color 當filltype=pattern時，描述圖像的融合背景色 
startarrow none none,block,classic,diamond,oval,open,chevron,doublechevron 描述線起點的箭頭樣式 
endarrow none none,block,classic,diamond,oval,open,chevron,doublechevron 描述線終點的箭頭樣式 
startarrowwidth medium narrow,medium,wide 當startarrow!=none時，描述起點箭頭的寬度 
startarrowlength medium short,medium,long 當startarrow!=none時，描述起點箭頭的高度 
endarrowwidth medium narrow,medium,wide 當endarrow!=none時，描述起點箭頭的寬度 
endarrowlength medium short,medium,long 當endarrow!=none時，描述起點箭頭的高度 
miterlimit 8.0 number 描述邊框關節位置的厚度 
joinstyle round round(rounded join),bevel(beveled join),miter(miter join) 描述邊框參加的樣式 
endcap round flat,square,round 描述邊框結束部分


3:開始二級標記的課程！ 
        通過以前所有章節的學習、在到從本章節開始，就表示你已對VML有了相當的認識、掌握了幾乎所有的VML一級標記、如果之前的內容你認真學習了的話。
        VML二級標記，你可以這樣理解：“它是專門爲VML一級標記設計的、它們可以修飾幾乎所有用VML一級標記繪製的圓形、矩形、弧形、曲線等幾乎所有形狀，從頭到腳、從邊框到背景、從立體到背景圖片、從路徑軌跡到超文本內容、等等。。二級標記可以將基礎的圖形包裝成各式各樣千奇百怪、二級標記可以說是一級標記的一件華麗的衣服”。
        不過，學習二級標記，我不會把二級標記的所有屬性一一演示、講解，更不會在去講之前那些基礎的知識（如果你不會，那現在就去看、去學、直到會了、能聽懂本章節以後的課程我所說的話爲止，我也不會在忌諱不加解釋的使用一些諸如交接點/通用屬性/專用屬性/Vector3D/DVML/coorsize/group/line/curve等等詞語）。並僅提供關於該二級屬性的常識問題以及一些比較有用的、實用的、好用的、抽象的屬性演示例子，你可以通過XXX二級標記專用屬性參考表提供的數據，自行更改例題，從而自己瞭解、掌握XX屬性是什麼效果、什麼用、我怎麼挪用應用到XX一級標記圖形中。

4:二級標記的兼容性問題 
        學習中你已知道，二級標記幾乎可以“從頭到腳”的處理圖形幾乎任何部分。但是如果圖形本身“只有頭沒有腳”，那麼你用專門處理“腳”的二級標記去處理它？不用說，肯定是無效的。那“腳”是什麼哪？舉個例子，line它只是線只有邊框概念而沒有填充概念，也就是說stroke二級標記可以處理它但fill(背景填充)二級標記就無法處理它。在說image，它只是圖像，沒有背景填充的概念，所以fill對它也無法處理。在拿oval、rect、roundrect這些圖形跟line線相比，前者由於都有背景概念，所以就支持fill填充。但是，它們卻無法使用“箭頭”，不然，你說oval、rect哪裏是起點？哪裏是終點？箭頭給它加到哪裏合適？而line、arc、curve、polyline、shape卻不同，他們都是線條類組成的、或根本就是一條line線，它門有線條起點、終點的概念，所以它們就支持在起點、終點增加箭頭。請看下面給圖形增加箭頭的例子對比

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
 
<v:line style="Z-INDEX:1;LEFT:225;POSITION:absolute;TOP:110" from="0,0" to="43.5pt,8.25pt" stroked="t" strokecolor="black" strokeweight=".75pt">
<v:stroke opacity="1" startarrow="none" endarrow="classic"/>
</v:line>
 
<v:arc style="Z-INDEX:1;LEFT:242;WIDTH:61;POSITION:absolute;TOP:169;HEIGHT:71" startangle="359" endangle="119" fillcolor="white" stroked="t" strokeweight="5">
<v:stroke color="red" opacity=".5" startarrow="oval" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>
</v:arc>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
 
<v:oval style="Z-INDEX:1;LEFT:330;WIDTH:58;POSITION:absolute;TOP:95;HEIGHT:58">
<v:stroke opacity="1" startarrow="none" endarrow="classic"/>
</v:oval>
 
<v:rect style="Z-INDEX:1;LEFT:335;WIDTH:53;POSITION:absolute;TOP:177;HEIGHT:56" fillcolor="white" stroked="t" strokecolor="black" strokeweight=".75pt">
<v:stroke color="red" opacity=".5" startarrow="oval" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>
</v:rect>
        顯示情況證明oval、rect就不支持箭頭，不過卻支持邊框顏色定義。 5:stroke邊框 - 精彩實例 我製作了幾個抽象的例子，源代碼自行分析，並請對照專用屬性表修改（其實學習二級標記就是學屬性！），篇幅問題不一一作出解釋。stroke所涉及的屬性，關鍵是活學活用，不要求全部學會、死記住，但建議應學會專用屬性表中我用紅色給標記的常用屬性，當然多了我不反對，只要你有腦子裝~

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
<v:line style="z-index:1;LEFT:256;POSITION:absolute;TOP:232" from="0,0" to="76.5,-17.25" stroked="t" strokecolor="black" strokeweight="3.75">
<v:stroke opacity="1" startarrow="oval" startarrowwidth="wide" startarrowlength="long" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>
</v:line>
<v:line style="z-index:1;LEFT:249;POSITION:absolute;TOP:151" from="0,0" to="76.5,-17.25" stroked="t" strokecolor="black" strokeweight="3.75">
<v:stroke opacity="1" startarrow="oval" startarrowwidth="narrow" startarrowlength="short" endarrow="classic" endarrowwidth="narrow" endarrowlength="short"/>
</v:line>
<v:line style="z-index:1;LEFT:252;POSITION:absolute;TOP:190" from="0,0" to="76.5,-17.25" stroked="t" strokecolor="black" strokeweight="3.75"> <v:stroke opacity="1" startarrow="oval" startarrowwidth="medium" startarrowlength="medium" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>
</v:line>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
<v:curve style="z-index:1;LEFT:249;POSITION:absolute;TOP:144" from="0,0" control1="32.25,-15" control2="24.75,24" to="70.5,0" filled="f" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">
<v:stroke opacity="1" startarrow="none" startarrowwidth="narrow" startarrowlength="short" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>
</v:curve>
<v:curve style="z-index:1;LEFT:251;POSITION:absolute;TOP:187" from="0,0" control1="32.25,-15" control2="24.75,24" to="70.5,0" filled="f" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">
<v:stroke opacity="1" startarrow="none" startarrowwidth="narrow" startarrowlength="short" endarrow="classic" endarrowwidth="wide" endarrowlength="long" dashstyle="dash"/>
</v:curve>
<v:rect style="z-index:1;LEFT:248;WIDTH:69;POSITION:absolute;TOP:222;HEIGHT:51" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">
<v:stroke opacity="1" dashstyle="dot"/>
</v:rect>
<v:rect style="z-index:1;LEFT:325;WIDTH:69;POSITION:absolute;TOP:223;HEIGHT:51" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">
<v:stroke opacity="1" dashstyle="dash"/>
</v:rect>
<v:rect style="z-index:1;LEFT:402;WIDTH:69;POSITION:absolute;TOP:223;HEIGHT:51" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">
<v:stroke opacity="1" dashstyle="longDashDotDot"/>
</v:rect>
<v:oval style="z-index:1;LEFT:244;WIDTH:61;POSITION:absolute;TOP:292;HEIGHT:58" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight="2.25">
<v:stroke opacity="1" dashstyle="shortDashDot"/>
</v:oval>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
<v:Image style="z-index:1;LEFT:258;WIDTH:100;POSITION:absolute;TOP:136;HEIGHT:100" src="shili/fyw1.jpg" bilevel="f" stroked="t" strokecolor="#e725d6" strokeweight="2.25">
<v:stroke opacity="1" dashstyle="shortDashDot"/>
</v:Image>
<v:roundrect style="z-index:1;LEFT:329;WIDTH:94;POSITION:absolute;TOP:183;HEIGHT:102" arcsize="9830f" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight="22.5">
<v:stroke opacity="0.2"/>
</v:roundrect>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
<v:oval style="z-index:1;LEFT:136;WIDTH:193;POSITION:absolute;TOP:115;HEIGHT:185" fillcolor="yellow" stroked="t" strokecolor="#e725d6" strokeweight="3.75"> <v:stroke filltype="frame" opacity="1" src="shili/fyw2.jpg"/>
</v:oval>
<v:oval style="z-index:1;LEFT:356;WIDTH:193;POSITION:absolute;TOP:119;HEIGHT:185" fillcolor="yellow" stroked="t" strokecolor="#e725d6" strokeweight="18.75">
<v:stroke filltype="frame" opacity="39321f" src="shili/haha.gif"/>
</v:oval>
<v:rect style="z-index:1;LEFT:593;WIDTH:131;POSITION:absolute;TOP:160;HEIGHT:127" fillcolor="white" stroked="t" strokecolor="black" strokeweight="30"> <v:stroke filltype="frame" opacity=".5" src="shili/fyw1.jpg"/>
</v:rect>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">
<v:rect style="z-index:1;LEFT:262;WIDTH:100;POSITION:absolute;TOP:147;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="green" strokeweight="15"> <v:stroke filltype="pattern" opacity="1" color2="red" src="shili/fyw1.jpg"/>
</v:rect>
<v:rect style="z-index:1;LEFT:400;WIDTH:100;POSITION:absolute;TOP:149;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="white" strokeweight="15"> <v:stroke filltype="pattern" opacity="1" color2="yellow" src="shili/fyw1.jpg" imagesize="1,1"/>
</v:rect>
<v:rect style="z-index:1;LEFT:533;WIDTH:100;POSITION:absolute;TOP:151;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="blue" strokeweight="15"> <v:stroke filltype="pattern" opacity="1" color2="lime" src="shili/fyw1.jpg" imagealignshape="f" imagesize="1,1"/>
</v:rect>
<v:rect style="z-index:1;LEFT:679;WIDTH:100;POSITION:absolute;TOP:150;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="blue" strokeweight="15">
<v:stroke filltype="tile" opacity="1" color2="lime" src="shili/fyw1.jpg" imagealignshape="f" imagesize="1,1"/>
</v:rect>
《VML極道教程》原著:沐緣華 
1章19節:shadow陰影 
1:shadow陰影 - 專用屬性參考表

屬性名 默認值 值類型/範圍 用途 
on true boolean 設置處理是否起效 
type single single,double,emboss,perspective 描述使用哪種陰影效果 
color black color 描述主要陰影顏色 
obscured false boolean 暗示看穿圖像如果沒有在形狀上填充 
opacity 1.0 0.0-1.0 描述陰影透明度 
offset 2pt,2pt Vector2D 描述陰影的XY偏移度 
color2 gray color 當type!=single時，描述二次投影顏色 
offset2 0pt,0pt Vector2D 當type!=single時，描述二次投影XY偏移度 
origin 0,0 Vector2D 當filltype!=solid時，描述陰影與投影的交接度 
matrix null string 當filltype!=solid時，描述變換點陣的強度


2:shadow陰影 - 應用精彩實例 
        即使是極道教程，也沒有什麼好說的，一切靠你自己分析研究、修改代碼達到精通爲止。對着例子、屬性表自己動手，是最佳的學習方法。另外該標記相當重要，務要靠自己的努力學會！

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3131;LEFT:234px;WIDTH:67px;POSITION:absolute;TOP:142px;HEIGHT:53px" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="black" opacity="52428f" offset="1.5pt,1.5pt"/>
</v:oval>
<v:rect style="Z-INDEX:3135;LEFT:320px;WIDTH:50px;POSITION:absolute;TOP:145px;HEIGHT:52px" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="black" opacity="52428f" offset="3.75pt,1.5pt"/>
</v:rect>
<v:roundrect style="Z-INDEX:3137;LEFT:402px;WIDTH:60px;POSITION:absolute;TOP:139px;HEIGHT:59px" arcsize="9830f" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="red" opacity="52428f" offset="-3.75pt,1.5pt"/>
</v:roundrect>
<v:line style="Z-INDEX:3139;LEFT:303px;POSITION:absolute;TOP:228px" from="0,0" to="100.5pt,-.75pt" strokecolor="black" strokeweight="5pt"> <v:shadow on="t" color="red" opacity="52428f" offset="3.75pt,2.25pt"/>
</v:line>
<v:curve style="Z-INDEX:3148;LEFT:452px;POSITION:absolute;TOP:235px" from="0,0" control1="42pt,-51.75pt" control2="-4.5pt,49.5pt" to="28.5pt,-4.5pt" filled="f" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="green" opacity="52428f" offset="1.5pt,.75pt"/>
</v:curve>
<v:Image style="Z-INDEX:3161;LEFT:509px;WIDTH:67px;POSITION:absolute;TOP:202px;HEIGHT:68px" src="shili/fyw1.jpg" bilevel="f">
<v:shadow on="t" color="yellow" opacity="52428f" offset="15pt,-15pt"/>
</v:Image>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3170;LEFT:303px;WIDTH:121px;POSITION:absolute;TOP:139px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt"> <v:shadow on="t" type="double" color="blue" opacity="52428f" offset="7.25pt,7.25pt"/>
</v:oval>
<v:oval style="Z-INDEX:3170;LEFT:444px;WIDTH:121px;POSITION:absolute;TOP:142px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt"> <v:shadow on="t" type="perspective" color="blue" opacity="26214f" matrix="78643f" offset="7.25pt,7.25pt"/>
</v:oval>
<v:oval style="Z-INDEX:2999;LEFT:505px;WIDTH:96px;POSITION:absolute;TOP:203px;HEIGHT:110px" fillcolor="yellow" strokecolor="black" strokeweight=".75pt"/>
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3170;LEFT:303px;WIDTH:121px;POSITION:absolute;TOP:139px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt"> <v:shadow on="t" type="double" color="blue" opacity="52428f" offset="7.25pt,7.25pt"/>
</v:oval>
<v:oval style="Z-INDEX:3170;LEFT:532px;WIDTH:121px;POSITION:absolute;TOP:226px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" type="double" color="blue" opacity="52428f" color2="green" offset="2.25pt,2.25pt" offset2="4pt,4pt"/>
</v:oval>
<v:oval style="Z-INDEX:3170;LEFT:526px;WIDTH:121px;POSITION:absolute;TOP:106px;HEIGHT:101px" filled="t" fillcolor="red" strokecolor="red" strokeweight=".75pt"> <v:shadow on="t" type="double" color="blue" opacity=".5" color2="green" offset="22.25pt,32.25pt" offset2="-22pt,32pt"/>
</v:oval>




 一、什麼是VML

VML相當於瀏覽器的畫筆，它可以在瀏覽器中畫出任何你想要的圖形：小到直線、圓形、圓弧、曲線、矩形、圓角矩形、多邊形；大到一張圖畫、一個動畫、甚至於一個遊戲。題中既以標明爲簡明教程，下邊我們只限於討論使用VML在瀏覽器中畫一些直線、圓形、圓弧等小圖。

VML是微軟1999年前(具體時間不詳)製作推出的，並集成到了IE5+瀏覽器，同樣也是Microsoft Office Art(藝術圖型,如word的藝術文字)的核心結構。VML由微軟Visio、Autodesk、Macromedia等企業推薦給W3C(WWW最高權利協會)，W3C採取、綜合了各方的推薦，於1999年初開始發展SVG，並隨後不久推出。SVG是綜合VML、GML等的改進(輸出效率、圖型質量、標記擴展)，被推薦爲標準，但SVG需要專門的圖像閱讀器如(Adobe SVG Viewer)，無法直接被瀏覽器引擎解析，以我見，SVG更適合於精度矢量圖型應用軟件開發、VML則適合應用在WEB頁，有不少文章說VML已過時，但仁者見仁、智者見智，VML我感覺相當健全(圖型質量、輸出速度)，它編寫簡單、瀏覽器可以解析、與HTML等語言完全兼容，它更具有實際WEB頁應用的可行性、深層開發的可行性。但遺憾的是目前支持VML的瀏覽器僅有IE。

二、VML基礎知識

如果你熟悉HTML的話，那麼學VML並不是一件複雜的事，因爲VML和HTML幾乎一樣，不僅表現在語法上，還有其對CSS、JS的支持都和HTML如出一轍。

1.基本語法
·標籤以<V:XXX>開頭</V:XXX>結尾，也支持空標籤如<V:XXX />
·標籤不區分大小寫
·標籤中間可嵌套其他標籤，可以是VML，也可以是HTML
·屬性的寫法爲"parameter=value"，如<V:XXX parameter="value"></V:XXX>，屬性值可加雙引號、單引號、也可不加

2.對CSS和JS的支持
·對CSS支持：<V:XXX style="parameter1:value1;parameter2:value2"></V:XXX>

3.VML文件擴展名
·可以是htm、html、asp、php、jsp等，即網頁格式

4.VML編輯器
·任何文本編輯器都可以，如記事本、Editplus、Dreamweaver，也有專業的工具如FlashVml3.0

5.一個簡單的範例

程序代碼 程序代碼
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>第一個VML範例</title>
<style>
v/:* { behavior: url(#default#VML);} 
o/:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:line style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
</body>
</html>


說明：
·xmlns:v="urn:schemas-microsoft-com:vml" //關鍵語句，表示創建一個叫v的XML命名空間，其中v可自行修改
·xmlns:o="urn:schemas-microsoft-com:office:office" //表示引用office相關的標記處理擴展，WEB中很少用，下邊不講
·v/:* { behavior: url(#default#VML);}    //關鍵語句，指明XML名域v引用的數據是VML標記語言
.<v:line style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/> //創建一條直線，VML在瀏覽器中畫圖的語句都是寫在<BODY></BODY>之間

三、通用屬性

下邊這些屬性大部分的VML標籤中都是可用的，爲了便於記憶將其分成了三類，其中第二類和HTML相同、第三類和CSS相同。 


 


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

JAVA使用ZXING二維碼生成器實現二維碼輸出

通過JAVA生成二維碼的方式主要有兩種（ZXing和QRCode），此次實現的代碼採用的是google公司提供的ZXing二維碼生成器。 第一步：導包   第二步：代碼實現 import java.io.File; import j

dsiori 2020-07-05 16:44:30

JAVA的多線程（詳細理解）【轉】

 本文主要講了java中多線程的使用方法、線程同步、線程數據傳遞、線程狀態及相應的一些線程函數用法、概述等。 首先講一下進程和線程的區別： 　　進程：每個進程都有獨立的代碼和數據空間（進程上下文），進程間的切換會有較大的開銷，一個進

dsiori 2020-07-05 16:44:30

主數據管理平臺應具備的六大功能

一、主數據域的定義 1、基於XML的域模型定義 2、模版的導入、解析、驗證 二、建模 1、圖形化的建模工具 2、多語言的支持 三、集成 1、完整的數據集成功能 2、支持自動化的過程 3、支持數據模型驅動 4、支持ETL過程及控制檯 5、

Billy.Wang 2020-07-02 18:45:18

動態頁面靜態化的處理類

import java.io.*;import java.net.URL;/** * * <p>Title:動態頁面靜態化 </p> * <p>Description: [email protected] </p> * <p

longing_chen 2020-07-02 05:08:57

標準I/O重導向

Java不但提供了標準的I/O：System.in，System.out和System.err，也提供了對標準輸入、標準輸出、標準錯誤輸出等I/O進行重導向。 在Java的System class中提供了以下幾個靜態函數實現了標準I/O的

longing_chen 2020-07-02 05:08:57

Java Map 分別按Key和Value排序的測試代碼

Java Map 分別按Key和Value排序的測試代碼 1、按鍵排序(sort by key) 採用TreeMap<K,V>，向其構造方法 TreeMap(Comparator<? super K> comparator)  傳入我們自

ydyuse 2020-07-01 05:10:00

2020 年 JVM 生態系統報告 Spring、Maven、ANGULAR、IDEA等主導市場

2020 年 JVM 生態系統報告   Spring、Maven、ANGULAR、IDEA等主導市場           2020 年 JVM 生態報告已於近日發佈，該報告由 Snyk 和 The Java Magazine（Oracle

ydyuse 2020-07-01 05:10:00

JVM原理及調優使用總結

一、JVM的內部體系結構： 基本概念：JVM(JAVA虛擬機-java visual machine)由三大部分組成 （1）類裝載器（ClassLoader）子系統 　　　　　作用: 用來裝載.class文件 （2）執行引擎 　　　　　作

peter-Guo 2020-06-30 09:15:12

js獲取滾動條距離瀏覽器頂部,底部的高度,兼容ie和firefox

jQuery當滾動條滾動時 一個元素到瀏覽器頂部的距離 隨滾動條滾動時，到頂部的距離爲本身的top+滾動條滾動 的距離，就是固定div 的位置 不隨滾動條滾動改變，不用fixed，就是一滾動top就等於滾動距離加上top。如此保證

yinxianluo 2020-06-28 13:47:06

刪除前彈出確認對話框的js代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

yinxianluo 2020-06-28 13:46:54

JSP實現網頁，數據庫分頁功能

提交到本頁面“dividepage.jsp” <%@ page language="java"contentType="text/html;charset=gb2312"%> <%@ page import="java.sql.*,j

yinxianluo 2020-06-28 13:46:53

java實現xml文件增刪改查

java一次刪除xml多個節點: 方案1、你直接修改了nodeList，這一般在做循環時是不允許直接這麼做的。你可以嘗試在遍歷一個list時，在循環體同時刪除list裏的內容，你會得到一個異常。建議你如下處理這個問題：

yinxianluo 2020-06-28 13:46:53

JS實現網絡拓撲圖

廢話先不多說，先上圖；這是一個模擬設備狀態的拓撲圖；圖中節點右上角的圓形圖標綠色代表正常，紅色代表設備一次；在圖片的左上角 是用來獲取節點的詳細信息的。具體方法在js中有註釋， 因爲這只是個教程，所以在寫代碼上不是很規範。所以希望大家

yinxianluo 2020-06-28 13:46:53

Cookie與Session小記

一 Cookie的作用      我們知道，HTTP協議是一種無狀態的通信，就是說，使用HTTP請求是無法保證連續訪問的。瀏覽器每請求一次WEB服務器，WEB服務器都認爲這是一次新的請求，它並不知道該瀏覽器前一次也訪問過。例如網上購物我們

oooooooooooooaaa 2020-06-28 03:17:03

爲Html的textarea元素內容設置樣式

html元素中，我們在textarea元素中輸入的內容，是沒有樣式的，如果想要輸入的字體有顏色或者加粗，等等樣式，如何實現呢？可以用div來實現，示例如下：   <textarea id="test"></textarea> <scrip

oooooooooooooaaa 2020-06-28 03:17:01