快捷搜索:

javascript动态创建VML

VML是The Vector Markup Language(矢量可标记说话)的缩写。VML用于将图形数据矢量化的标记说话。这是一种基于 XML 语法的说话,由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的规划,于1999年9月附带IE5.0宣布的。应用VML可以在IE中绘制矢量图形,以是有人觉得VML便是在IE中实现了画笔的功能。要应用 VML,我们首先要开辟一个命名空间。

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

它们的感化相称于把HTML标签搞成下面这个样子:

接着便是在样式中调用对应的CSS hehavior。静态代码应该是这个样子:

网优势传IE8对VML支持不友好,要放弃VML如此,主要缘故原由在于“vml\:*”这个选择器被IE8觉得分歧法(不和证实IE在努力修正其 CSS bug)。由此,人们被迫使用v\:line, v\:rect, v\:roundrect, v\:oval这样子的联合选择器来调用相关的CSS hehavior。不过只如果合法选择器就可以调用CSS hehavior,是以这里用联合选择器其实太累赘了。我想换类选择器是否更相宜点呢?试验一下,是无问题的。但仅仅是这样是衬着不出来的,因为IE8已经重写了内核,是以此bug不是hasLayout可以办理的。官方给出谜底是应用display:inline-block,这样就可以强逼它继承衬着了。后来我又发明display:block也有此功效,但斟酌到内联元素的问题,照样用官方的补丁吧 。至此,开辟命名空与与衬着VML元素的问题就告一段落。

再来看若何动态创建VML元素,因为长短标准,我们就用非标准的createElement要领来创建它。我们必要拼接一个字符串,作为createElement 的参数,它应该包孕命名空间与类名。

var createVML = function (tagName) {

return doc.createElement('');

};

随便做了一个小对象,看看后果若何:

(function(){

if(!window.vml){

window.vml = {};

document.createStyleSheet().addRule(".vml", "behavior:url(#default#VML);display:inline-block;");

if (!document.namespaces.vml && !+"\v1"){

document.namespaces.add("vml", "urn:schemas-microsoft-com:vml");

}

}

var vml = window.vml = function(name){

return vml.fn.create(name || "rect");

}

vml.fn = vml.prototype = {

create : function(name){

this.node = document.createElement('');

return this;

},

appendTo: function(parent){

if(typeof this.node !== "undefined" && parent.nodeType == 1){

parent.appendChild(this.node);

}

return this;

},

attr : function(bag){

for(var i in bag){

if(bag.hasOwnProperty(i)){

this.node.setAttribute(i,bag[i])

}

}

return this;

},

css: function(bag){

var str = ";"

for(var i in bag){

if(bag.hasOwnProperty(i))

str +=i == "opacity" ? ("filter:alpha(opacity="+ bag[i] * 100+");"):(i+":"+bag[i]+";")

}

this.node.style.cssText = str;

return this;

}

}

})()

javascript动态创建VML by 司徒正美

javascript动态创建VML

必须要IE中才能看到图形!

运行代码

想学VML,请百度《VML极玄门程》或《Vml:美洲豹系列教程》。

var doc = document;

doc.createStyleSheet().addRule(".vml", "behavior:url(#default#VML);display:inline-block;");

try {

if (!doc.namespaces.rvml) {

doc.namespaces.add("vml", "urn:schemas-microsoft-com:vml");

}

var createVML = function (tagName) {

return doc.createElement('');

};

} catch (e) {

var createVML = function (tagName) {

return doc.createElement('');

};

}

您可能还会对下面的文章感兴趣: