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 比例(实际宽:width100/coordsize第一个值；实际高:height100/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 plain copy
<html xmlns:v="urn:schemas-microsoft-com:vml">
2,添加行为和命名空间的关系，至于这句话的意思后面有详细解释
[html] view plain copy
<style>v:*{behavior:url(#defualt#vml);display:inline-block}</style>
有了上面的两个步骤我们就可以开始用vml“画画了”。
先上一个例子再解释你就明白个中奥妙了：
[html] view plain copy
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>vml</title>
<style>v: * {behavior:url(#default#vml);display:inline-block}</style>
</head>
<body>
<v:oval style="width:50px;height:50px" fillcolor="red"></v:oval>
</body>
</html>
image.png
一个简单的圆就画好了，这里面的v:* 是一个css样式，表示所有以"V:"开头的标签的dom元素都继承了这个样式，样式内容就是将vml的默认行为给这些元素，既然是继承样式以前我们经常用class继承，这里也是完全可以的，至于后面的display:inline-block,其实是对ie8样式的兼容问题（经过我测试好像加不加这句ie8显示无碍，既然官方给出这样的写法，自有道理，可能是不同版本当时的兼容问题，也可能后期ie8修复了，在此就不多纠结）。这样一来凡是"v:"开头的标签都有了vml的默认行为，那么我们就可以用vml的方式添加属性了，下面我会开始介绍vml的一些形状以及属性。
在此之前我想很多人可能觉得这样通过标签画的矢量图实在无趣，而且不实用，那么我们就来点实用和令人兴奋的东西，我们让javascript将普通的html文档动态创建出符合vml运行的环境。还是看例子：
[html] view plain copy
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vml</title>
</head>
<style type="text/css">
</style>
<body>
<script language="JavaScript" type="text/javascript">
window.onload = function(){
var cont = document.getElementById('dv');
var oval = document.createElement('oval');//创建元素
oval.xmlns="urn:schemas-microsoft-com:vml";//相当于上面的赋值命名空间
oval.style.behavior='url(#default#VML); display:inline-block';//相当于上面添加vml默认样式
oval.style.position = 'absolute';
oval.style.width = '50px';
oval.style.height= '50px';
oval.fillcolor= 'red';
cont.appendChild(oval);
}
</script>
<div id='dv'></div>
</body>
</html>
我们就这么很方便的动态创建了一个vml矢量图，如果你有心而且追求扩展性的话，其实我们可以写的更加美妙的js，比如通过：
[javascript] view plain copy
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 plain copy
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>vml</title>
<style>v: * {behavior:url(#default#vml);display:inline-block}</style>
</head>
<body>
<v:oval CoordSize='28000,28000' style="position:relative;left:5;top:5;width:100;height:80"/>
</body>
</html>
CoordSize:其实是网格大小，当CoordSize为 28000,28000 就是将横纵坐标和纵坐标被分成了28000个点，这并不是HTML里面默认像素。具体的形状大小定义还要靠style中的width和height。宽和高都是指的多少个网格的宽和高，放大和缩小调整CoordSize的值就可以搞定。默认元素都是从左上角0,0处开始排放。
属性：
属性其实就是形状的表现样式，从下面开始我就不累赘的写html结构了，如果测试代码可以将上面的body中的代码替换成我所给的代码就行了。
[html] view plain copy
<v:line style="position:relative" from="0,0" to="100,0" >
<v:stroke dashstyle="Dot" EndArrow="Classic" />
</v:line>
这种写法是将属性添加到单独的标签中。
stroke：画笔属性包括：
strokeweight，dashstyle，strokecolor，opacity="0.5"，linestyle线条风格，,joinstyle线条转折样式，filltype线条填充样式。
dashstyle：
image.png
linestyle：single，thinthin，thinthick，thickthin，thickbetweenthin
详细的可以自己试试，我给一个thickbetweenthin图片，大家有个概念，是那一块儿变了就行：
image.png
joinstyle：round，bevel，miter，完全可以理解为笔触样式，也就是转折地方的样式，我也跟上面一样不多截图了：
image.png
以上就不详细解释，如果想深入了解就课看下面的链接吧，里面都有，用的时候查就可以了。
http://msdn.microsoft.com/en-us/library/bb264134(v=vs.85)
fill： 填充颜色；
type：gradient,frame可以填充图片,pattern,gradientRadial。
[html] view plain copy
<v:oval style='width:120pt;height:90pt' strokecolor="red"
strokeweight="2.5pt">
<v:fill type="frame" src="image1.jpg" />
</v:oval>
image.png
method:linear,sigma,any,none 渐变方式。
angle角度 渐变角度。
image.png
v:shadow：阴影；
[html] view plain copy
<v:RoundRect style="position:relative;width:100;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
</v:RoundRect>
image.png
属性ok了下面继续我们的shape的扩展形状上面讲了直线下面接着说形状，形状其实都是由shape衍生出来的对象，shape是最基础也是最强大的绘图方式。下面先说说衍生出来的形状。
形状
直线：
[html] view plain copy
<v:line style="position:relative" from="0,0" to="100,0" >
<v:stroke dashstyle="Dot" EndArrow="Classic" />
</v:line>
image.png
折线：
[html] view plain copy
<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative" >
<v:stroke StartArrow="Oval" EndArrow="Classic" dashstyle="Dot" />
</v:PolyLine>
[图片上传中...(image.png-e163b1-1658201366726-0)]
折线就是给几个点从第一个往后链接形成的。
圆形：
[html] view plain copy
<v:oval style="position:relative;left:5;top:5;width:100;height:80"/>
image.png
通过left:5;top:5;width:100;height:80可控制长宽以及开始位置。
矩形：
分两种一种是直角矩形：
[html] view plain copy
<v:rect style="position:relative;left:5;top:5;width:100;height:80"/>
image.png
另一种是圆角矩形：
[html] view plain copy
<v:RoundRect style="position:relative;width:100;height:50px"></v:RoundRect>
image.png
图片：
[html] view plain copy
<v:image src="big.GIF" style="position:relative;top:0;left:0;width:165;height:157" />
image.png
img也有很多特殊的属性，可以控制明暗，图片位置，透明度等
grayscale是否为黑白色（true false），backlevel取值（-1，1),gain色相（数字）
图片位置cropbottom, croptop, cropleft, and cropright （0~1）
最后的两个是比较特殊的，不属于形状对象，可以理解成容器对象。
shapetype：
VML的这个功能很有用，模版，顾名思义，它可以减少书写代码的量，又使的代码可读性提高。在理解VML模版的时候，可以和 HTML 的 CSS 一样理解，它是定义好的一种形状，下次使用的时候直接声明 type 属性就可以了。看看下面的例子：
[html] view plain copy
<v:shapetype id="arrowUP" coordsize="6 6">
<v:path v="m 3,0 l 0,6,6,6,3,0 x e" />
</v:shapetype>
<v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>
image.png
用type指向上面shapetype的id就可以继承下来定义的形状。
group：
可以理解成一个画布，我们可以修改画布的CoordSize，或者Rotation 来改变画布的属性进而改变画布里面的图形的展现。
[html] view plain copy
<v:shapetype id="arrowUP" coordsize="6 6">
<v:path v="m 3,0 l 0,6,6,6,3,0 x e" />
</v:shapetype>
<v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>
<v:group style="position:relative;WIDTH:200px;HEIGHT:200px;rotation:45" coordsize = "2000,2000">
<v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>
</v:group>
image.png
————————————————
版权声明：本文为CSDN博主「yinxianluo」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yinxianluo/article/details/45334837
网友评论