VML使用

为了兼容IE8,博客介绍了如何使用VML在Leaflet中进行GIS图形的展示。通过JavaScript动态添加命名空间的方法在IE8下并不适用,而是推荐了一种更有效的实现方式,包括创建对象和样式表规则。同时,文中提到了VML支持的属性和样式,包括一些HTML和CSS不支持的特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近因gis部分展示需要兼容IE8,特针对leaflet代码进行了兼容IE8的开发工作,绘制展示方面使用了VML

网上大多数使用JavaScript动态添加命名空间的方式为:

document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");

添加vml图形后并没有正常展示,因IE8特殊性,使用JavaScript动态添加命名空间等方法使用如下方式较为有效:

if (!document.namespaces['v']) {

        var vml; 

        var vmlstyle;

        document.namespaces.add('v');

        vml=document.createElement('object');

        vml.id='VMLRender';

        vml.codebase='vgx.dll';

        vml.classid='CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E';

        document.body.appendChild(vml);

        vmlstyle=document.createStyleSheet();

        vmlstyle.addRule('v\\:*',"behavior: url(#default#VML);")

}

参考:http://mochou123456.blog.163.com/blog/static/4605764620107247318949/


关于VML标签支持的样式及属性,如下,下列内容完全参考自http://blog.youkuaiyun.com/yzj_000/article/details/1745105

1. VML标记特有的通用属性(非HTML、CSS所有) 

属性名默认值值类型/范围用途
strokeweight0.75pt=1pxnumber描述图形的边框粗度
strokecolorblackcolor描述图形的边框颜色
strokedtrueboolean描述图形是否使用边框
fillcolorwhitecolor描述图形的背景颜色
filledtrueboolean描述图形是否使用背景
printtrueboolean描述图形是否允许被打印机打印
coordsize1000,1000Vector2D暗示图形与容器空间的大小比例
coordorigin0 0Vector2Dcoordinate at top-left corner of element
wrapcoordsnullstringoutline to use for tight text wrapping

2. VML标记支持的HTML通用属性

属性名默认值值类型/范围用途
idnullstring定义元素的标识索引(多用于DHTML编程)
classnullclassname定义元素使用的CSS样式类
stylenullCSS string描述图形的CSS样式表
titlenullstring定义图形的提示标题(鼠标靠近后的帮助提示)
hrefnullstring定义图形链接的URL地址
target_self_self/_blank/_top定义图形以何种形式打开链接
contentEditablefalseboolean描述图形内容是否允许用户编辑
dirltrltr/rtl描述图形内容以哪种方向输出
disabledfalseboolean描述图形能够响应用户事件触发

3. VML标记支持的CSS通用属性

其实,VML元素几乎支持所有CSS样式定义,有些HTML元素不支持的像(rotation,旋转样式),VML却支持。这里只列举部分。

属性名可用值/可用值范围用途
width0-9999描述宽度
height0-9999描述高度
positionstatic absolute fixed relative描述如何定位输出
left0-9999描述距离页面位置左
top0-9999描述距离页面位置上
z-index0-9999描述3D位置
cursorauto crosshair hand move help wait text……描述鼠标形状
zoom0-99描述缩放比例
cliprect(上 右 下 左)描述裁剪对象
border0-99 style color描述边框
displayblock none inline list-item描述显示或隐藏
overflowvisible auto hidden scroll描述滚动条
colorcolorstring描述文本内容颜色
font-size0-999描述文本内容字号
filterxray flipv fliph invert alpha(opacity=num)描述滤镜效果
rotation(0-9999)%360描述旋转度
flipx y描述反转或颠倒图形

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值