学习VML笔记

作者:网络 来源:佚名 更新时间:2008-07-07 16:04:41 点击:

vml是the vector markup language的缩写。


参考网站
msdn:http://msdn.microsoft.com/workshop/author/vml/shape/introduction.asp

w3c:http://www.w3.org/tr/note-vml

首先需要在<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"

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"

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>