vml(vector markup language)
是一个最初由microsoft开发的xml词表，现在也只有ie5.0以上版本对vml提供支持。使用vml可以在ie中绘制矢量图形，所以有人认为vml就是在ie中实现了画笔的功能。下面介绍一下vml的优点：
基于xml标准
xml是公认拥有无穷生命力的下一代网络标记语言， vml具有先天的优势，它的表示方法简单，易于扩展等等。
支持高质量的矢量图形显示
vml支持广泛的矢量图形特征，它们基于由相连接的直线和曲线描述路径。在vml中使用两个基本的元素：shape和group。这两个元素定义了vml的全部结构；shape描述一个矢量图形元素，而group用来将这些图形结合起来，这样它们可以作为一个整体进行处理。
vml规范包括大量的支持多种不同矢量图形特征的元素。下面是vml的预定义图形元素：
l shape
l path
l line
l polyline
l curve
l rect
l roundrect
l oval
l arc
l group
由文本构成的图像，并可集成到html
由于vml使用简单的文本来表示图像，这样就可用很少的字节来表示比较复杂的图像。vml与html兼容，通过在html中声明vml命名空间并声明处理函数，就可以和其他html元素一样使用vml元素，在客户端浏览器显示图像。vml标记里面可以定义dhtml大部分属性和事件，比如说id, name, title, onmouseover 等等。
支持交互与动画
但vml的功能不只是绘图，他还可以在图形中嵌入文本，并可实现超链，还可通过脚本语言实现一定的动画功能。
vml是the vector markup language的缩写。
参考网站
msdn：
w3c：
首先需要在<html> 标签中加上如下引用
| <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> ... </html> |
如果没有您没有用到office的扩展功能的话，您可以忽略第二个schema。
同时，您需要在style元素中注册vml和microsoft office extensions
| v\:* { behavior: url(#default#vml); } o\:* { behavior: url(#default#vml); } |
如果没有您没有用到office的扩展功能的话，您可以忽略第二个样式的定义。
下面说说常用的几个元素
1.shape元素
用法：<v:shape ...></v:shape>
它的常用属性：
fillcolor：图象填充色。
标签语法：
<v:element fillcolor="expression">
脚本语法：
element.fillcolor="expression"
expression=element.fillcolor
path:指定绘画的路径
脚本用法：
<v:shape id="rect01"
fillcolor="red" strokecolor="red"
coordorigin="0 0" coordsize="200 200"
style="position:relative;top:1;left:1;width:20;height:20"
path="m 1,1 l 1,200, 200,200, 200,1 x e">
</v:shape>
说明：用字母m（moveto命令）定义图象初始点的坐标，例子中为(1,1)
用字母l（小写的l字母，lineto命令）开始画线，先画到(1,200)，再画到(200,200)，再画到(200,1)
用字母x（close命令）关闭线条
用字母e（end命令）结束
注意：每两个数字组成一个坐标
title:鼠标移动到图象上时的提示文字
style:图象的样式
filled:决定闭合路径中是否需要填充(true/false)
strokecolor:图象路径的颜色
2.shape元素有效的子元素
textbox:在图象中定义一个文本框
用法：
<v:shape>
<v:textbox>vml</v:textbox>
</v:shape>
textpath:设置文字路径，要使用该属性，path属性的textpathok一定要为true;并且textpath的on属性要为true
详细说明文挡请上参考网站查阅！！！
简单的例子：
| <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <style> v\:* { behavior: url(#default#vml);} o\:* { behavior: url(#default#vml);} </style> <title>vml sample</title> </head> <body> <v:shape fillcolor="green" style="position:relative;top:1;left:1;width:200;height:200" path = "m 1,1 l 1,250, 250,500, 500,500, 500,250, 250, 1 x e" title="test" strokecolor="yellow"> <v:fill type='gradient' id='fill1' color='red'/> <v:textbox>vml</v:textbox> </v:shape> </body> </html> |
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
我要评论
网友评论