浅尝VML

最新推荐文章于 2021-12-29 20:46:22 发布

weixin_34088838

最新推荐文章于 2021-12-29 20:46:22 发布

阅读量81

点赞数

我真是孤陋寡闻,前段时间才知道SVG,今天才知道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>