首页 > 代码库 > VML元素的相关资料

VML元素的相关资料

虽然VML已经过气了,但有时我还不得不使用它,下面是我收集或研究得到的一些东西。

判定一个元素是否为VML元素

function isVML(el) {    if (el && el.nodeType === 1) {        var nodeName = el.nameName        //VML元素的nodeName都是小写,并且存在命名空间,并且outerText总为空         return nodeName.toLowerCase() === nodeName && node.scopeName && node.outerText === ""    }    return false}

相对应判定一个SVG元素就简单多了

function isSVG(el) {   return el && el.nodeType === 1 && (el instanceof window.SVGElement) }

判定浏览器是否支持SVG或VML

function supportsVml() {    if (typeof supportsVml.supported == "undefined") {        var a = document.body.appendChild(document.createElement(‘div‘));        a.innerHTML = ‘‘;        var b = a.firstChild;        b.style.behavior = "url(#default#VML)";        supportsVml.supported = b ? typeof b.adj == "object": true;        a.parentNode.removeChild(a);    }    return supportsVml.supported}function supportsSvg() {    return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0")}

VML的一级标签

shape, line, polyline, rect, roundrect, oval, arc, curve,background, image, shapetype, group

VML的二级标签

fill, stroke, shadow, extrusion, textbox, imagedata, textpath

IE8标准模式下VML不能显示问题可参见这里

IE下复制VML元素时,遗漏了它的某些属性见这里

//下面代码是从我的avalon抠出来的,结合了jQuery对cloneNode方法的修正以及我对VML元素的处理    function fixCloneNode(src) {        var target = src.cloneNode(true)        if (window.VBArray) {//只处理IE            var srcAll = getAll(src)            var destAll = getAll(target)            for (var k = 0, src; src = http://www.mamicode.com/srcAll[k]; k++) {"INPUT" && /radio|checkbox/.test(src.type)) {                        dest.defaultChecked = dest.checked = src.checked                        if (dest.value !== src.value) {                            dest.value = http://www.mamicode.com/src.value//IE67复制后,value从on变成""                        }                    } else if (nodeName === "OBJECT") {                        if (dest.parentNode) {//IE6-10拷贝子孙元素失败了                            dest.outerHTML = src.outerHTML                        }                    } else if (nodeName === "OPTION") {                        dest.defaultSelected = dest.selected = src.defaultSelected                    } else if (nodeName === "INPUT" || nodeName === "TEXTAREA") {                        dest.defaultValue = http://www.mamicode.com/src.defaultValue"") {                        //src.tagUrn === "urn:schemas-microsoft-com:vml"//判定是否为VML元素                        var props = {}//处理VML元素                        src.outerHTML.replace(/\s*=\s*/g, "=").replace(/(\w+)="([^"]+)"/g, function(a, prop, val) {                            props[prop] = val                        }).replace(/(\w+)=‘([^‘]+)‘/g, function(a, prop, val) {                            props[prop] = val                        })                        dest.outerHTML.replace(/\s*=\s*/g, "=").replace(/(\w+)="/g, function(a, prop) {                            delete props[prop]                        }).replace(/(\w+)=‘/g, function(a, prop) {                            delete props[prop]                        })                        delete props.urn                        delete props.implementation                        for (var i in props) {                            dest.setAttribute(i, props[i])                        }                        fixVML(dest)                    }                }            }        }        return target    }    function fixVML(node) {        if (node.currentStyle.behavior !== "url(#default#VML)") {            node.style.behavior = "url(#default#VML)"            node.style.display = "inline-block"            node.style.zoom = 1 //hasLayout        }    }

VML元素的相关资料