IE中的VML介绍
2017-04-09 17:36

VML的由来

VML的全称是The Vector Markup Language(矢量可标记语言)。VML是作为IE的画笔在web页面中提供图形绘制的功能的。如果结合js还可以实现图形的动画效果。VML是microsoft于1999年9月在IE5.0上发布的图形功能。是一种word和HTML结合的产物。并且VML绘制的是矢量图形,跟SVG一样。

如果你的web页面想要在IE8浏览器上实现圆角,折线等效果,可以考虑使用vml技术。而且有一个js库,叫“excanvas.js”,就是通过使用IE的vml来实现与canvas画布的兼容效果的。百度的Echarts 2.0就是基于excanvas实现图表的兼容的。

VML的使用

VML的使用首先要引入一个命名空间:

<html xmlns:v="urn:schemas-microsoft-com:vml">

在html标签上添加一个xmlns:v属性来引入vml的命名空间。

然后要使用IE的behavior属性来制定命名空间的行为指向vml

<style>
    v\:*{behavior:url(#default#VML);}
</style>

如果我们要使用圆形,半圆,斜线等图形,需要对他们添加behavior属性:

<style>
v\:*{behavior:url(#default#VML);}
v\:Oval{behavior:url(#default#VML);}
v\:arc{behavior:url(#default#VML);}
v\:line{behavior:url(#default#VML);}
.box-bgvml{width:68px;height:98px;position:absolute;left:0px;top:0px;z-Index:1;}
</style>

然后,我们可以在页面中这样使用他们:

<!--[if lt IE 9]>
<v:Oval fillcolor='#E3F2F9' strokecolor='#fff' strokeweight='0px' class='box-bgvml' ></v:Oval>
<![endif]-->
</div>
<div>
<!--[if lt IE 9]>
<v:Oval fillcolor='#fff' strokeweight='1px' strokecolor='#48C0F8'  class='box-bgvml'  ></v:Oval>
<![endif]-->
</div>
<div>
<!--[if lt IE 9]>
<v:Oval fillcolor='#48C0F8' strokeweight='0px' strokecolor='#fff'  class='box-bgvml' ></v:Oval>
<![endif]-->
</div>
<div>
    <!--[if lt IE 9]>
  <v:line from="0,0" to="200,60" style="position:absolute;z-index:1;left:0;top:0;">

  </v:line>
    <![endif]-->
</div>

在IE下的展示效果如下:

blob.png

使用“<!--[if lt IE 9]>”IE的注释代码是为了只在IE8浏览器下使用他们。在IE9中已经支持svg,border-radius等属性。在IE8中我们使用vml的一大用途就是为了能支持border-radius实现圆角。

我们可以实现圆角矩形:

<div>
    <!--[if lt IE 9]>
    <v:RoundRect style="position:absolute;width:100px;height:60px;" strokewidth="2px" strokecolor="blue" arcsize="0.2">

    </v:RoundRect>
    <![endif]-->
</div>
<style>
v\:RoundRect{behavior:url(#default#VML); }
</style>

别忘了一定要设置behavior属性,而且,vml图形一定要absolute定位才能显示出来。效果如下:

blob.png

VML元素都有什么属性呢?

这是我从网上截图的一个vml属性的列表,介绍的很详细。VML的图形有:

Line直线,使用form, to属性定义直线的两端。

Rect,RoundRect矩形和圆角矩形,圆角矩形使用arcsize来定义圆角的大小,范围是0-0.5,如果是正方向,那么arcsize="0.5"就会变成一个圆形。

Oval圆形,通过style样式定义宽高,宽高不同会变成椭圆。

arc弧线,通过startangle表示开始度数,endangle表示结束弧度

<!--[if lt IE 9]>
<v:arc strokeweight="2px" strokecolor="yellow" style="position:absolute;width:100px;height:100px;" 
startAngle="0" EndAngle="220" ></v:arc>
<![endif]-->

blob.png

arc的效果图。

polyline折线,折线就是用来绘制图表的。

<!--[if lt IE 9]>
    <v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:absolute">
    </v:PolyLine>
<![endif]-->

折线polyline通过points来定义线段的每一个点。效果如下:

blob.png

结语

    VML确实已经过时,唯一现在IE8还有一部分份额,所以vml可以用来实现圆角,圆形等形状,使得border-radius的特性能在IE8中实现。IE10已经不支持VML了。并且从IE9就支持SVG了,显然SVG是比VML更规范的矢量图形。IE下实现vml,一定要注意引用命名空间,给要使用的图形绑定vml行为,只绑定v\:*是不行的,vml的图形一定是绝对定位:absolute,absolute,absolute。不然IE不会渲染VML图形的。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(1161)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1