示例网站http://bbs.blueidea.com/thread-2575802-1-1.html
VML的全称是Vector Markup Language(矢量标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量。
VML是微软1999年9月附带IE5.0发布的，故只有IE5.0以上版本对VML提供支持。
一、使用大致步骤
1、加入vml命名空间
<html xmlns:v="urn:schemas-microsoft-com:vml">
2、CSS中加入behavior（行为）
<style>
v\:*{behavior:url(#default#VML); position:absolute;}
</style>
3、使用VML标记
<v:标记…../>
二、特殊写法
1、很多属性既可以写在标记里面，又可以独立出一个新的标记来表示。（类似于XML）
如:<v:shape id=shape1 StrokeColor=red Path="m 0,0 l 10,10 x e"></v:shape>
等同于:
<v:shape id=shape1>
<v:Stroke StrokeColor=red/>
<v:Path v="m 0,0 l 10,10 x e"/>
</v:shape>
2、多参数间的逗号（，）可要可不要。
如：coordsize="6,6"
等同于coordsize="6 6"
三、VML坐标系
在VML中，使用的坐标不是Document的坐标，它有自己的坐标系。如：
<v:shape CoordOrig="m1,m2" CoordSize="n1,n2" style="width:n3;height:n4" />
// CoordOrig属性：设置原点坐标。如果没有设置，默认是0,0（左上角）
//CoordSize属性：用来定义坐标的，表示横纵坐标被分成了n1、n2个点，而非像素。
定义的坐标只是相对的，真正显示的图形大小还需要 style="width:n3;height:n4" 来定义
四、通用属性
1、VML特有的通用属性（HTML、CSS不具有）
属性名
默认值
值类型/范围
用途
strokeweight
0.75pt=1px
number
描述图形的边框粗度
strokecolor
black
color
描述图形的边框颜色
stroked
true
boolean
描述图形是否使用边框
fillcolor
white
color
描述图形的背景颜色
filled
true
boolean
描述图形是否使用背景
print
true
boolean
描述图形是否允许被打印机打印
coordsize
1000,1000
Vector2D
暗示图形与容器空间的大小比例
coordorigin
0 0
Vector2D
元素的左上角坐标
wrapcoords
null
string
outline to use for tight text wrapping
2、VML标记支持的HTML通用属性
属性名
默认值
值类型/范围
用途
id
null
string
定义元素的标识索引
class
null
classname
定义元素使用的CSS样式类
style
null
CSS string
描述图形的CSS样式表
title
null
string
定义图形的提示标题
href
null
string
定义图形链接的URL地址
target
_self
_self/_blank/_top
定义图形以何种形式打开链接
contentEditable
false
boolean
描述图形内容是否允许用户编辑
dir
ltr
ltr/rtl
描述图形内容以哪种方向输出
disabled
false
boolean
描述图形能够响应用户事件触发
3、VML标记支持的CSS通用属性
属性名
可用值/可用值范围
用途
width
0-9999
描述宽度
height
0-9999
描述高度
position
static/absolute/fixed/relative
描述如何定位输出
left
0-9999
描述距离页面位置左
top
0-9999
描述距离页面位置上
z-index
0-9999
描述3D位置
cursor
auto/crosshair/hand/move/help/wait/ text/…
描述鼠标形状
zoom
0-99
描述缩放比例
clip
rect(上 右 下 左)
描述裁剪对象
border
0-99 style color
描述边框
display
block/none/inline/list-item
描述显示或隐藏
overflow
visible/auto/hidden/scroll
描述滚动条
color
colorstring
描述文本内容颜色
font-size
0-999
描述文本内容字号
filter
xray/flipv/fliph/invert/alpha(opacity=num)
描述滤镜效果
rotation
(0-9999)%360
描述旋转度
flip
x y
描述反转或颠倒图形
……
……
……
五、基本标记
1、shape（任意形状）
示例：创建任意曲线
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 x e"/>
2、line（直线）
示例：创建一条从(0,0)到(200,200)的红色的边框为2px的直线
<v:line strokecolor="red" strokeweight="2" style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
3、polyline(多义线/多边形)
示例：创建不规则的连续线
<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"/>
4、rect(矩形) 、roundrect(圆角矩形)
示例：创建一个宽100高100的矩形
<v:rect style="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/>
//其它属性：其高宽主要由style中的width和height决定（必须）
5、oval(圆)、arc(圆弧)
示例：创建一个宽400高400边框为红色填充为绿色的圆
<v:Oval strokecolor=”red” fillcolor=”green” style=”width:400;height:400;left:5;top:5”/>
6、curve(曲线)
示例：创建一条曲线
<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"/>
7、background(背景)：
示例：
<v:background fillcolor="white">
<v:fill angle=50 type='gradient' color2="yellow"/>
</v:background>
8、image（图像）：显示从外部调用的图形文件，并没有将之矢量化。
<v:image src="big.GIF" style="position:relative;top:0;left:0;width:165;height:157" />
9、shapetype(模板)：为减少代码的书写量和可读性。用shapetype定义好形状，然后用shape的type属性调用(<v:shape type=”id名”…/>)
示例：定义一个向上的三角形，然后调用之
//定义一个向上的三角形
<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;left:100;top:100"/>
<v:shape type="#arrowUP" style="position:relative;width:150;height:150; left:200;top:200"/>
10、group(集合容器)：让一些列的对象成为一个组，拥有共同的坐标系。可以动态改变CoordSize的值放大或缩小整个Group里面的VML对象。
<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:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>
//当使用group后，容器内图形的left、top、width、height等值都是相对group的值。
六、二级标记
二级标记可以看作是对有限的属性进行扩展，利用它我们可以做出更漂亮的图画出来。
1、fill(填充)
2、stroke(边框)
3、shadow(阴影)
示例：创建一个偏离5像素的阴影
<v:RoundRect style="position:relative;width:100;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
</v:RoundRect>
4、extrusion(立体3D)
5、textbox（文本）
<v:RoundRect style="position:relative;width:120;height:50px">
<v:TextBox inset="5pt,5pt,5pt,5pt" style="font-size:10.2pt;">Hello world!</v:TextBox>
</v:RoundRect>
6、imagedata(背景图片)
7、textpath（文本路径）
七、应用
1、脚本动态生成VML 2、放大缩小VML
3、给VML增加事件 4、数据图表——统计图表
5、矢量地图——GIS的应用 6、文本修改留痕——MIS的应用
分享到：
相关推荐
vml在线画图用例，含Flashvml2及Flashvml3的用例。 什么是vml? VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的，在我认为， VML其实是...
VML是Microsoft提出的一种标准，但随着现代浏览器对SVG和Canvas的支持增强，VML的使用逐渐减少。 在"vml柱状图 vml html jquery"这个主题中，我们主要关注如何使用VML在HTML页面上创建柱状图表，并结合jQuery库来...
VML（Vector Markup Language）是一种标记语言，用于在网页上创建和展示矢量图形。它在HTML中提供了绘制矢量图像的能力，使得图形可以按比例缩放而不失真，特别适用于制作图表、流程图以及复杂的设计元素。VML是微软...
### VML语言入门知识点 #### 一、VML简介与学习方法 **VML**(Vector Markup Language)是一种用于在网页上绘制矢量图形的语言，类似于SVG，但它由微软开发并主要用于Internet Explorer浏览器。VML允许开发者在HTML...
VML，全称为Vector Markup Language，是一种用于在网页上描绘矢量图形的标记语言。它在HTML中提供了绘制矢量图像的能力，使得图形在不同分辨率的设备上都能保持清晰，不损失质量。这个"vml极道教程"显然是一个深入...
vml入门 vml教程 vml参考 vml实例 从网络上收集的各种vml实例.方便vml入门人员. 也有各种vml图形
VML，全称Vector Markup Language，是一种基于XML的标记语言，用于在网页上创建和展示矢量图形。这种技术特别适用于需要精确控制图形细节、分辨率独立且需要与HTML文档结合的场景。VML极道教程是一份深入浅出的教程...
### VML技术简明教程 #### 一、VML简介 VML（Vector Markup Language）是一种用于在Web页面上绘制矢量图形的技术。它是由微软在1999年之前推出的一种浏览器图形渲染技术，并且被集成到了IE5及以后的版本中。通过...
VML全称Vector Markup Language，是一种用于在网页上创建和显示矢量图形的XML标记语言。在本教程“VML极道教程”中，我们将探讨这个技术的基础知识，以及如何利用它来提升网页设计的视觉效果。 一、VML简介 VML是...
vML，全称为Vector Markup Language，是一种用于在网页上绘制矢量图形的标记语言。它在Web开发领域，尤其是在早些年，对于那些需要在不支持SVG（Scalable Vector Graphics）或者Flash的浏览器上展示矢量图形的场景中...
**VML图像画版详解** VML，全称Vector Markup Language，是一种用于在网页上创建和显示矢量图形的标记语言。它是由微软公司在20世纪90年代末开发的，主要目的是为了在Internet Explorer浏览器中提供一种与SVG...
本文将深入探讨如何使用VML来实现圆角表格，这是一种在没有现代CSS3圆角边框支持的情况下实现圆角效果的技术。 首先，我们需要了解VML的基本结构。VML使用XML语法，每个图形元素如矩形、线、弧线等都是一个独立的...
**VML（Vector Markup Language）**是一种标记语言，用于在网页上呈现矢量图形。它是在HTML和XML的基础上设计的，允许开发者创建出清晰、可缩放的图形，这些图形在不同分辨率的屏幕上都能保持高质量的表现。VML在...
VML，全称为Vector Markup Language，是一种用于在网页上创建矢量图形的XML标记语言。在20世纪90年代末到21世纪初，VML是与SVG（Scalable Vector Graphics）竞争的一种标准，主要用于在网页中展示高质量、可缩放的...
VML（Vector Markup Language）是一种用于在网页上呈现矢量图形的标记语言，尤其在早期的Internet Explorer浏览器中被广泛使用。它通过XML扩展来创建和控制图形，从而实现复杂和高质量的图形显示。以下是对VML技术...
VML，全称Vector Markup Language，是一种用于在网页中创建矢量图形的标记语言。它类似于HTML，但在HTML的基础上提供了一种描绘2D图形、3D效果以及动态动画的方法。VML的优势在于其输出的图形是矢量格式，这意味着...
**VML极道教程** 在计算机图形学和网页设计领域，VML（Vector Markup Language）是一种用于在HTML文档中呈现矢量图形的标记语言。它由微软公司开发，旨在提供一种方式来创建和显示复杂的图形，特别是在那些不支持...
由于VML是微软公司推出的标准，因此在Internet Explorer浏览器上支持较好，但在其他如Firefox、Chrome等非IE内核浏览器中，其支持度相对较弱。 这篇“VML教程”可能是为了帮助开发者理解和掌握这种技术，特别适合...
FlashVml3是一款针对Flash开发的专业工具，主要服务于那些在Web设计和开发中使用Flash的用户。VML全称为Vector Markup Language，是一种用于在网页上绘制矢量图形的标记语言，而FlashVml3则是将这两者结合，帮助...
VML（Vector Markup Language）是一种矢量图形语言，由微软在1999年随着IE5.0发布，主要针对IE浏览器。VML允许开发者在HTML文档中创建和操纵矢量图形，这些图形可以无损地放大或缩小，特别适合用于地图、图表和其他...