VML元素的相关资料 #455

RubyLouvre · 2014-08-12T19:06:11Z

    function getAll(elem) {//VML的getElementsByTagName("*")不能取得所有元素节点
        var ret = []
        function get(parent, array) {
            var nodes = parent.childNodes
            for (var i = 0, el; el = nodes[i++]; ) {
                if (el.nodeType === 1) {
                    array.push(el)
                    get(el, array)
                }
            }
            return array
        }
        return get(elem, ret)
    }
    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 (src.tagUrn === "urn:schemas-microsoft-com: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.zoom = 1 //hasLayout
        }
    }

RubyLouvre · 2014-08-13T03:11:22Z

<html >
    <head>
        <title>by 司徒正美</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     

        <meta http-equiv="X-UA-Compatible" content="IE=7" />
        <script>
            document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");

        </script>
        <script src="avalon.js"></script>
        <style>
            .vml{
                behavior: url(#default#VML);
                display:inline-block;
                _zoom:1;
                width:200px;
                height:100px;

            }


        </style>

        <script>
            var vmodel = avalon.define('test', function(vm) {
                vm.array = [1, 2, 3, 4]
                vm.pp = ""
                vm.ss = ""
            })
            window.onload = function() {
                var el = document.getElementById("pid")
                vmodel.pp = el.outerHTML
                var el2 = document.getElementById("sid")
                vmodel.ss = el2.outerHTML
            }
        </script>

    </head>
    <body ms-controller="test">
        <p>{{pp}}</p>
        <p>{{ss}}</p>
        <p><input id="input"></p>
    <v:rect style='width:120px;height:80px' fillcolor="red" class="vml" id="pid">
        <v:fill type="gradient" id="sid" />
    </v:rect>
    <v:oval strokecolor='red' fillcolor=' green ' style="width:400;height:400"/>
    <v:curve style="z-index:1;left:100;position:absolute;top:300" from="0px,0px" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/>

</body>
</html>

结果以下:

<?import namespace = v urn = "urn:schemas-microsoft-com:vml" implementation = "#default#VML" declareNamespace /><v:rect id=pid class=vml style="HEIGHT: 80px; WIDTH: 120px" coordsize = "21600,21600" fillcolor = "red"><v:fill id=sid type = "gradient"></v:fill></v:rect>

<?import namespace = v urn = "urn:schemas-microsoft-com:vml" implementation = "#default#VML" declareNamespace /><v:fill id=sid type = "gradient"></v:fill>

它也有可以是

<?xml:namespace prefix = "v" />

RubyLouvre · 2014-08-13T13:52:01Z

        if (elem.tagUrn === "urn:schemas-microsoft-com:vml" && elem.currentStyle.behavior !== "url(#default#VML)") {
            var nodes = getAll(elem)
            nodes.unshift(elem)
            for (var j = 0, el; el = nodes[j++]; ) {
                fixVML(el)
            }
        }

RubyLouvre · 2014-08-13T14:12:10Z

function supportsVml() {
    if (typeof supportsVml.supported == "undefined") {
        var a = document.body.appendChild(document.createElement('div'));
        a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
        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")
}

http://cibo.org/css/pie.htc
http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser

RubyLouvre · 2014-08-14T03:53:02Z

<html >
    <head>
        <title>by 司徒正美</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     
<!--               <meta http-equiv="X-UA-Compatible" content="IE=7" />-->
        <script>

            document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");
        </script>
        <script src="avalon.js"></script>
        <style>
        </style>
        <script>
            var vmodel = avalon.define('test', function(vm) {
                vm.array = [1, 2, 3, 4]
            })

        </script>

    </head>
    <body ms-controller="test">

        <p>现在avalon只需要添加一行<em>  document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML")</em></p>
        <p>定义好VML所使用的命名空间，然后保证VML元素的localName正确就行了</p>
    <v:rect style='width:200px;height:80px' fillcolor="red" ms-repeat="array">
        <v:fill type="gradient" id="sid" />
    </v:rect>
    <v:oval id=test style="width: 100px; height: 100px" > 
        <v:stroke weight="1px" color="navy"/> 
    </v:oval>
    <v:line strokecolor="red" strokeweight="2" 
            style="z-index:5;position:absolute;left:233px;top:150px" 
            from="0,0" to="200,200"/>
    <v:curve style="z-index:1;left:100;position:absolute;top:300" 
             from="0px,0px" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/>
    <v:oval strokecolor="black" fillcolor="white" 
            style="position:relative;left:9px;top:20px;width:60px;height:60px;z-index:8">
        <v:shadow on="t" type="single" color="silver" offset="3pt,3pt"></v:shadow>
    </v:oval>
    <v:roundrect strokecolor="yellow" fillcolor="white" style="position:relative;left:20;top:5;width:100px;height:40px;z-index:9">
        <v:shadow on="t" type="single" color="silver" offset="3pt,3pt"></v:shadow>
        <v:textbox id="memo" style="font-size:10pt;color:green;line-height:18px" inset="1,1,1,1">Hello world!<br>Hello VML!</v:textbox>
    </v:roundrect>
</body>
</html>

RubyLouvre · 2014-08-14T05:57:40Z

一级标签
shape, line, polyline, rect, roundrect, oval, arc, curve,background, image, shapetype,group
二级标签
fill, stroke, shadow, extrusion, textbox, imagedata, textpath

http://www.cnblogs.com/xjk15082/archive/2011/09/12/2174130.html

RubyLouvre · 2014-08-14T06:00:10Z

E8标准模式下VML不能显示问题

当页面使用下，在IE7或者IE兼容模式下，使用VML可以正常显示，但是IE8标准模式下，不能正常渲染VML，导致显示不成功

可以使用如下方法：

1、设置为IE7模式
2、引人相应的namespace

<?import namespace="v" implementation="#default#VML" ?>

或者

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

或者

if(!document.documentMode || document.documentMode<8) { 
  document.createStyleSheet().addRule('v\\:*', "behavior: url 
(#default#VML);"); 
}

if(document.documentMode && document.documentMode>=8) { 
  document.writeln('<?import namespace="v" 
implementation="#default#VML" ?>');

RubyLouvre · 2014-08-14T06:02:12Z

判定是否为VML元素

var nodeName = el.nameName
var isVML = nodeName.toLowerCase() === nodeName && node.scopeName && node.outerText === ""

RubyLouvre changed the title ~~复制VML元素~~ 完美支持对VML元素的复制 Aug 13, 2014

RubyLouvre changed the title ~~完美支持对VML元素的复制~~ VML元素的相关资料 Aug 14, 2014

RubyLouvre closed this as completed Sep 2, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VML元素的相关资料 #455

VML元素的相关资料 #455

RubyLouvre commented Aug 12, 2014

RubyLouvre commented Aug 13, 2014

RubyLouvre commented Aug 13, 2014

RubyLouvre commented Aug 13, 2014

RubyLouvre commented Aug 14, 2014

RubyLouvre commented Aug 14, 2014

RubyLouvre commented Aug 14, 2014

RubyLouvre commented Aug 14, 2014

VML元素的相关资料 #455

VML元素的相关资料 #455

Comments

RubyLouvre commented Aug 12, 2014

RubyLouvre commented Aug 13, 2014

RubyLouvre commented Aug 13, 2014

RubyLouvre commented Aug 13, 2014

RubyLouvre commented Aug 14, 2014

RubyLouvre commented Aug 14, 2014

RubyLouvre commented Aug 14, 2014

E8标准模式下VML不能显示问题

RubyLouvre commented Aug 14, 2014