浅尝VML
2007-07-06 15:18 Windie Chai 阅读(1818) 评论(4) 编辑 收藏 举报
我真是孤陋寡闻,前段时间才知道SVG,今天才知道VML.
尝试着写了下面两个对话框,代码也附在文末.
<HTML xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* {behavior:url(#default#VML);}
body{font-size:9pt;}
h1{font-size:10pt;font-weight:bold;margin:5px}
ul{margin-left:15px;}
</style>
</head>
<body>
<v:group id="box2" style='left:0;top:0;width:400px;height:200px'>
<v:oval style="width:100%;height:100%;padding:75px;" fillcolor="#DDDDDD" strokecolor="#DDDDDD">
VML(The Vector Markup Language),矢量可标记语言，是由Microsoft开发的XML词表，而且只有IE5.0以上版本对VML提供支持。
使用VML可以在IE中绘制矢量图形，所以有人认为VML就是在IE中实现了画笔的功能。
<v:shadow on="t" color="#333333" opacity="0.75" offset="2pt,2pt"/>
<v:fill type="gradient" opacity="1" color2="#FFF"/>
</v:oval>
<v:shape style="WIDTH:100;HEIGHT:100;top:100%;left:50%" coordsize="100,100" fillcolor="#DDDDDD" strokecolor="#DDDDDD" path="m0,0 l200,150,100,-20 e">
<v:shadow on="t" color="black" opacity="0.5" offset="1.5pt,1.5pt"/>
</v:shape>
</v:group>
</br>
<v:group id="box1" style='width:400px;height:550px'>
<v:roundrect style="width:100%;height:100%;padding:20px;" fillcolor="#DDDDDD" strokecolor="#DDDDDD">
下面介绍一下VML的优点：
<ul>
<li><h1>1.基于XML标准</h1>
XML是公认拥有无穷生命力的下一代网络标记语言，所以VML具有先天的优势，它的表示方法简单，易于扩展等等。</li>
<li><h1>2.支持高质量的矢量图形显示</h1>
矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途。</br>
VML支持广泛的矢量图形特征，它们基于由相连接的直线和曲线描述路径。在VML中使用两个基本的元素：shape和group。这两个元素定义了VML的全部结构：shape描述一个矢量图形元素，而group用来将这些图形结合起来，这样它们可以作为一个整体进行处理。</br>
VML规范包括大量的支持多种不同矢量图形特征的元素。下面是VML的预定义图形元素：</br>
Shape</br>
Path</br>
Line </br>
Polyline</br>
Curve </br>
Rect</br>
Roundrect</br>
Oval</br>
Arc</br>
Group</li>
<li><h1>3.由文本构成的图像，并可集成到HTML</h1>
由于VML使用简单的文本来表示图像，这样就可用很少的字节来表示比较复杂的图像。VML与HTML兼容，通过在HTML中声明VML命名空间并声明处理函数，就可以和其他HTML元素一样使用VML元素，在客户端浏览器显示图像。VML标记里面可以定义DHTML大部分属性和事件，比如说id, name, title, onmouseover 等等。</li>
<li><h1>4.支持交互与动画</h1>
但VML的功能不只是绘图，他还可以在图形中嵌入文本，并可实现超链，还可通过脚本语言实现一定的动画功能。</li>
</ul>
<v:fill type="gradient" opacity="1" color2="#FFF"/>
<v:shadow on="t" color="#333333" opacity="0.75" offset="2pt,2pt"/>
</v:roundrect>
<v:shape style="WIDTH:100;HEIGHT:100;top:100%;left:25%" coordsize="100,100" fillcolor="#DDDDDD" strokecolor="#DDDDDD" path="m0,0 l200,150,100,0 e">
<v:shadow on="t" color="black" opacity="0.5" offset="1.5pt,1.5pt"/>
</v:shape>
</v:group>
</body>
</HTML>
尝试着写了下面两个对话框,代码也附在文末.
<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <head> <style> 
v\:* {behavior:url(#default#VML);} 
v\:* body{font-size:9pt;} h1{font-size:10pt;font-weight:bold;margin:5px} ul{margin-left:15px;} </style> </head><body><v:group id="box2" style='left:0;top:0;width:400px;height:200px'><v:oval style="width:100%;height:100%;padding:75px;" fillcolor="#DDDDDD" strokecolor="#DDDDDD">VML(The Vector Markup Language),矢量可标记语言，是由Microsoft开发的XML词表，而且只有IE5.0以上版本对VML提供支持。使用VML可以在IE中绘制矢量图形，所以有人认为VML就是在IE中实现了画笔的功能。<v:shadow on="t" color="#333333" opacity="0.75" offset="2pt,2pt"/><v:fill type="gradient" opacity="1" color2="#FFF"/></v:oval><v:shape style="WIDTH:100;HEIGHT:100;top:100%;left:50%" coordsize="100,100" fillcolor="#DDDDDD" strokecolor="#DDDDDD" path="m0,0 l200,150,100,-20 e"><v:shadow on="t" color="black" opacity="0.5" offset="1.5pt,1.5pt"/></v:shape></v:group></br><v:group id="box1" style='width:400px;height:550px'><v:roundrect style="width:100%;height:100%;padding:20px;" fillcolor="#DDDDDD" strokecolor="#DDDDDD">下面介绍一下VML的优点：<ul><li><h1>1.基于XML标准</h1>XML是公认拥有无穷生命力的下一代网络标记语言，所以VML具有先天的优势，它的表示方法简单，易于扩展等等。</li><li><h1>2.支持高质量的矢量图形显示</h1>矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途。</br>VML支持广泛的矢量图形特征，它们基于由相连接的直线和曲线描述路径。在VML中使用两个基本的元素：shape和group。这两个元素定义了VML的全部结构：shape描述一个矢量图形元素，而group用来将这些图形结合起来，这样它们可以作为一个整体进行处理。</br>VML规范包括大量的支持多种不同矢量图形特征的元素。下面是VML的预定义图形元素：</br>Shape</br> Path</br>Line </br>Polyline</br>Curve </br>Rect</br>Roundrect</br>Oval</br>Arc</br>Group</li><li><h1>3.由文本构成的图像，并可集成到HTML</h1>由于VML使用简单的文本来表示图像，这样就可用很少的字节来表示比较复杂的图像。VML与HTML兼容，通过在HTML中声明VML命名空间并声明处理函数，就可以和其他HTML元素一样使用VML元素，在客户端浏览器显示图像。VML标记里面可以定义DHTML大部分属性和事件，比如说id, name, title, onmouseover 等等。</li><li><h1>4.支持交互与动画</h1>但VML的功能不只是绘图，他还可以在图形中嵌入文本，并可实现超链，还可通过脚本语言实现一定的动画功能。</li></ul><v:fill type="gradient" opacity="1" color2="#FFF"/><v:shadow on="t" color="#333333" opacity="0.75" offset="2pt,2pt"/></v:roundrect><v:shape style="WIDTH:100;HEIGHT:100;top:100%;left:25%" coordsize="100,100" fillcolor="#DDDDDD" strokecolor="#DDDDDD" path="m0,0 l200,150,100,0 e"><v:shadow on="t" color="black" opacity="0.5" offset="1.5pt,1.5pt"/></v:shape></v:group></body></HTML>
原文发布于coding.windstyle.cn，欢迎访问、订阅并和我交流。
