VML画连线箭头,line线加粗

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/" onclick=/"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" ondblclick="dbClick()" onmousedown="msDown()" onmousemove="msMove()" onmouseup="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相同。 


 


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页