当前位置: 代码网 > it编程>网页制作>Css > vml简介

vml简介

2024年05月15日 Css 我要评论
vml(vector markup language) 是一个最初由microsoft开发的xml词表,现在也只有ie5.0以上版本对vml提供支持。使用vml可以在ie中绘制矢量图形,所以有人认为v

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: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"
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>

 

 

(0)

相关文章:

  • 实用CSS 文字收集

    实用CSS 文字收集

    text-transform:uppercase //把文字变成全大写 text-transform:lowercase //把文字变成全小写 text-tra... [阅读全文]
  • 数据图表

    数据图表

    现在我们来看看vml的一些应用。数据图表可以说是vml的拿手好菜。绘制图表,最重要的步骤是把数据转换成坐标。由于vml是矢量的, 给数据的取值范围有很大的自由度... [阅读全文]
  • javascript代码规范小结

    javascript代码规范小结

    1. javascript代码应符合douban-jslint检验标准 1-1. 语句必须都有分号结尾,除了for, function, if, switch,... [阅读全文]
  • 给VML增加事件

    给VML增加事件

    vml 和 html 的紧密结合,使的给 vml 增加事件变得很容易.所有的 html 里面的事件都可以应用到 vml 中间来!下面的例子是演示:当鼠标移动到圆... [阅读全文]
  • 纯CSS绘制三角形(各种角度)

    我们的网页因为 css 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 css3 的广泛使用,更多新奇的 c…

    2024年05月15日 网页制作
  • 放大缩小VML

    放大缩小VML

    由于vml是矢量的,放大缩小变得很容易了。我们先看一个例子,看看vml能做到什么程度。还是以前面的一个飞碟做为例子。它是用线、圆、弧等形状拼凑起来的一个图形。我... [阅读全文]

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com