VML简明教程

转载 2007年10月06日 15:57:00
一、什么是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简明教程

一、什么是VMLVML相当于浏览器的画笔,它可以在浏览器中画出任何你想要的图形:小到直线、圆形、圆弧、曲线、矩形、圆角矩形、多边形;大到一张图画、一个动画、甚至于一个游戏。题中既以标明为简明教程,下边...
  • shaily
  • shaily
  • 2007年08月22日 11:44
  • 9475

VML简明教程(转)

 一、什么是VMLVML相当于浏览器的画笔,它可以在浏览器中画出任何你想要的图形:小到直线、圆形、圆弧、曲线、矩形、圆角矩形、多边形;大到一张图画、一个动画、甚至于一个游戏。题中既以标明为简明教程,下...
  • yusongwhu
  • yusongwhu
  • 2009年11月04日 16:52
  • 340

VML 学习笔记

观看者:有xml,javascript基础的同学 目标:熟练掌握vml 实现方式:代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。 VML的全称是Vector Marku...
  • jumtre
  • jumtre
  • 2014年08月06日 10:15
  • 2466

VML、SVG、Canvas简介

1、VML:        VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途,VML只是...
  • jcx5083761
  • jcx5083761
  • 2013年10月24日 16:30
  • 4604

VML实例及两个网站

把下面两个实例复制出来,然后保存成htm格式就OK了。你就可以通过IE访问它,看到效果了。vml相关的两个站点:http://www.vmlmaker.com/gallery/visio/basic_...
  • gzxiaohao
  • gzxiaohao
  • 2005年01月05日 09:33
  • 3981

VML极道教程(一) VML介绍

本系列文章导航VML极道教程(一) VML介绍 VML极道教程(二) VML入门VML极道教程(三) 标记实战与line线VML极道教程(四) oval圆rect矩型VML极道教程(五) RoundR...
  • hemingwang0902
  • hemingwang0902
  • 2009年06月27日 17:37
  • 5656

基于VML与HTML5 Canva实现的跨浏览器饼图与折线图

一个简单的JS图表库演示源代码,因为太懒,没毅力,源码给有缘者得之或者有用吧! 1. 支持IE6+以上版本,支持Chrome, 支持FireFox 2. 动画加载机制 3. tooltip支持 4. ...
  • jia20003
  • jia20003
  • 2013年09月16日 21:14
  • 10362

自动选择SVG和VML的WEB页面

 自动选择SVG和VML的WEB页面问题       在WEB上使用二维图形编程的人员现在面临者一个两难的选择,是使用SVG,还是VML?二者的功能相似,可以满足大多数WEB二维图形应用的需求,但目前...
  • firefight
  • firefight
  • 2006年10月23日 10:03
  • 6506

IE不支持vml的处理

在网上搜索了很久,有一些类似情况的例子,但都没有解决。后来和一台表现正常的电脑作了对比,找出了病因:IE不显示VML是因为注册表中缺失了必要的项目。相应的解决办法就是把正常电脑上的相关注册表项导出(为...
  • blade2001
  • blade2001
  • 2010年11月13日 21:47
  • 2225

VML画流程图

就用了两个最基本的元素,一是线,二是框。有很多人问我要源代码,我现在就把它帖出来吧。其实很简单的,可能没有接触过VML的人对此感觉到神秘。html xmlns:v="urn:schemas-micro...
  • doymm2008
  • doymm2008
  • 2010年04月07日 10:40
  • 4002
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:VML简明教程
举报原因:
原因补充:

(最多只允许输入30个字)