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 = srcAll[k]; k++) {
                if (src.nodeType === 1) {
                    var nodeName = src.nodeName
                    var dest = destAll[k]
                    if (nodeName === "INPUT" && /radio|checkbox/.test(src.type)) {
                        dest.defaultChecked = dest.checked = src.checked
                        if (dest.value !== src.value) {
                            dest.value = 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 = src.defaultValue
                    } else if (nodeName.toLowerCase() === nodeName && src.scopeName && src.outerText === "") {
                        //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
        }
    }