VML实现圆角的例子

原创 2007年09月17日 10:27:00

 

<html xmlns:v>
<head>
<style>
v/:* {behavior: url(#default#VML);}
</style>
</head>
<body>
<v:RoundRect style="position:fixed; left:0px; top:0px; width:100%; height:150px;" FillColor="#eeeeee" Filled="T" strokeColor="#000000">
<v:textbox>
  <table width="98%" height="50" border="1" cellspacing="0" cellpadding="0" align="right">
    <tr>
      <td align="center">哈哈哈哈</td>
    </tr>
  </table>
</v:textbox>
</v:RoundRect>
</body>
</html>

 

    VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的,在我认为, VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML,其中的文本和图片可以很容易的转换,但如果是手绘制的图形在以往的IE里面就无法解释了,如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE里面,使IE也具备了绘图功能。
    VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途。

    在VML里面,标记使用的是XML扩张,需要一个namespace(命名空间),你可以使用惯用的“v”作为命名空间,使用IE5.0到IE6.0通用的定义如下:

<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v/:* { Behavior: url(#default#VML) }
</STYLE>

    xmlns 全称就是XML NameSpace 也就是命名空间。Behavior(行为)也是IE5.0新推出的东西,它的功能非常强大,结合样式表,可以给任何HTML对象增加行为(新的属性、方法、事件),而在这里,它的用处是把命名空间“v”和系统预定义的行为VML连接。这样定义以后,你就可以使用下面的标记了,和普通的HTML标记有所区别,每个标记都增加了一个命名空间:

<v:shape></v:shape>

    和其他HTML元素一样,VML标记里面可以定义DHTML大部分属性和事件,比如说id,name,title,onmouseover等等。在写法上VML比较灵活,很多属性既可以写在标记里面,又可以独立出一个新的标记来表示:

<v:shape id=shape1 name=shape1 onmouseover="alert(this.id)" StrokeColor=red Path="m 0,0 l 10,10 x e"></v:shape>
等同于下面的写法:
<v:shape id=shape1 name=shape1 onmouseover="alert(this.id)">
<v:Stroke StrokeColor=red/>
<v:Path v="m 0,0 l 10,10 x e"/>
</v:shape>

    当然不是所有的属性都可以写成独立的标记,常用的比如说上面的 Stroke(按我的理解可以翻译成线性),Path,Shadow,Fill(填充)等,VML这样的方式可以理解为 shape 的属性分类,使属性更直观。
    Shape 对象派生出来的一些对象,更加直接的图象,比如说 Rect(矩形),RoundRect(圆边的矩形),Oval(圆),Line(线),PolyLine(不规则折线),Image(图形文件)等等,以后将对这些对象细细描述。

版权声明:本文为博主原创文章,未经博主允许不得转载。

VML实例及两个网站

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

VML 学习笔记

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

Vml+Dhtml:制作一个应用渐变颜色效果不错的进度条

//原作:风云舞,载自:http://www.lshdic.com/bbs效果不错的VML进度条v/:*{behavior:url(#default#VML);}*{font-size:12px;co...
  • 21aspnet
  • 21aspnet
  • 2004年10月27日 19:28
  • 1860

Javascript 对SVG和 VML的封装

Raphael是一个轻巧的Javascript类库,用于简化处理web上的矢量图形。如果你想创建图表、图片裁剪以及图片旋转等图形应用,用Raphael类库可以轻松的实现。 Raphael基于SVG(...
  • mtfsoft
  • mtfsoft
  • 2012年04月27日 00:02
  • 1050

<canvas> 标记和 SVG 以及 VML 之间的差异

标记和 SVG 以及 VML 之间的一个重要的不同是, 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。 这两种方式在功能上是等同的,任何...
  • caoxj0507
  • caoxj0507
  • 2012年02月26日 10:58
  • 1330

VML、SVG、Canvas简介

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

VML极道教程(一) VML介绍

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

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

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

vml制作的圆角表格

v/:*{behavior:url(#default#VML)}           VML   
  • liu_zhongjie
  • liu_zhongjie
  • 2009年08月29日 11:32
  • 197

VML标记属性说明

1. VML标记特有的通用属性(非HTML、CSS所有)  属性名 默认值 值类型/范围 ...
  • yzj_000
  • yzj_000
  • 2007年08月15日 15:36
  • 1130
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:VML实现圆角的例子
举报原因:
原因补充:

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