码迷，mamicode.com
首页 > 其他好文 > 详细

VML画连线箭头，line线加粗

时间：2015-04-28 14:07:24      阅读：152      评论：0      收藏：0      [点我收藏+]

标签：连线   vml   line   

一、什么是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相同。 
技术分享


 


VML画连线箭头，line线加粗

标签：连线   vml   line   

原文地址：http://blog.csdn.net/yinxianluo/article/details/45334837
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！