Question

console.log(document.getElementsByTagName("svg"));

我明白了

但

时

console.log(document.getElementsByTagName("svg")[0]);

我只能得到未定义

svg元素是由javascript创建的，但我不知道它是否已被加载...

我很抱歉代码太长了但是当我删除有关图像的代码时，它运行良好。这里：

＆＃13;

 <!DOCTYPE html> 
    <html>
    <head>
    <script type="text/javascript">
    var svgns = "http://www.w3.org/2000/svg";
    var xlinkns = "http://www.w3.org/1999/xlink";

    // draw svg frame
    var drawSVG = function (width,height)
    {
        var width = 500,height = 500;
        var testsvgpic = document.createElementNS(svgns,"svg:svg");
        testsvgpic.setAttributeNS(null,"viewBox","0 0 " + width + " " +height);
        testsvgpic.setAttributeNS(null,"id","svgTemplate");
        testsvgpic.setAttributeNS(null,"width",width);
        testsvgpic.setAttributeNS(null,"height",height);
        testsvgpic.style.display = "block"; 

        
        document.body.appendChild(testsvgpic);
        console.log("background done!");
    }

    //transfor string to array

    // define pointsSharp 
    var pointsSharp = function()
    {
        var iconTemplate = document.createElementNS(svgns,"defs");

        var pathDisconnected = document.createElementNS(svgns,"path");
        pathDisconnected.setAttributeNS(null,"id","iconDisconnected");
        pathDisconnected.setAttributeNS(null,"d","M 0 0 L 10 10 M 0 10 L 10 0 z");
        pathDisconnected.setAttributeNS(null,"stroke","#808080");
        pathDisconnected.setAttributeNS(null,"stroke-width",3);
    		
        iconTemplate.appendChild(pathDisconnected);

//      ......  
    	
        console.log(document.getElementsByTagName("svg")[0]);
        console.log(document.getElementsByTagName("svg"));
document.documentElement.getElementsByTagName("svg").appendChild(iconTemplate);
        }



    </script>
    </head>
    <body>
    <div id="imgWrap"></div> 
    <script type="text/javascript">
    var imgUrl = 'http://c.s-microsoft.com/zh-cn/CMSImages/20150717_1-1.jpg?version=f4c9d0b8-5817-91b4-c2b8-457c92838ef4';

    drawSVG();

    //right here
    pointsSharp();

    </script>
    </body>
    </html>

＆＃13;

完整代码：

＆＃13;

        <!DOCTYPE html> 
        <html>
        <head>
        <script type="text/javascript">
        var svgns = "http://www.w3.org/2000/svg";
        var xlinkns = "http://www.w3.org/1999/xlink";

    var imgReady = function (url,callback, error) {
        var width, height, intervalId, check, div,
            img = new Image(),
            body = document.body;
    		
        img.src = url;
    	
    // 从缓存中读取
        if (img.complete) {
            return callback(url,img.width, img.height);
        };
    	
    // 通过占位提前获取图片头部数据
        if (body) {
            div = document.createElement('div');
            div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
            div.appendChild(img)
            body.appendChild(div);
            width = img.offsetWidth;
            height = img.offsetHeight;
    		
            check = function () {
            if (img.offsetWidth !== width || img.offsetHeight !== height) {
                clearInterval(intervalId);
                callback(url,img.offsetWidth, img.clientHeight);
                img.onload = null;
                div.innerHTML = '';
                div.parentNode.removeChild(div);
                };
            };
    		
            intervalId = setInterval(check, 150);
        };
    	
    // 加载完毕后方式获取
        img.onload = function () {
            callback(url,img.width, img.height);
            img.onload = img.onerror = null;
            clearInterval(intervalId);
            body && img.parentNode.removeChild(img);
        };
    	
    // 图片加载错误
        img.onerror = function () {
            error && error();
            clearInterval(intervalId);
            body && img.parentNode.removeChild(img);
        };
    	
    };
        // draw svg frame
        var drawSVG = function (width,height)
        {
            var width = 500,height = 500;
            var testsvgpic = document.createElementNS(svgns,"svg:svg");
            testsvgpic.setAttributeNS(null,"viewBox","0 0 " + width + " " +height);
            testsvgpic.setAttributeNS(null,"id","svgTemplate");
            testsvgpic.setAttributeNS(null,"width",width);
            testsvgpic.setAttributeNS(null,"height",height);
            testsvgpic.style.display = "block"; 

            
            var bg =  document.createElementNS(svgns,"image");
            bg.setAttributeNS(xlinkns,"href",imgUrl);
            bg.setAttributeNS(null,"id","bg");
            bg.setAttributeNS(null,"x",0);
            bg.setAttributeNS(null,"y",0);
            bg.setAttributeNS(null,"height",height);
            bg.setAttributeNS(null,"width",width);
            bg.setAttributeNS(null,"visibility", "visible");
    		
            testsvgpic.appendChild(bg);
            document.body.appendChild(testsvgpic);
            console.log("background done!");

        }

        //transfor string to array

        // define pointsSharp 
        var pointsSharp = function()
        {
            var iconTemplate = document.createElementNS(svgns,"defs");

            var pathDisconnected = document.createElementNS(svgns,"path");
            pathDisconnected.setAttributeNS(null,"id","iconDisconnected");
            pathDisconnected.setAttributeNS(null,"d","M 0 0 L 10 10 M 0 10 L 10 0 z");
            pathDisconnected.setAttributeNS(null,"stroke","#808080");
            pathDisconnected.setAttributeNS(null,"stroke-width",3);
        		
            iconTemplate.appendChild(pathDisconnected);

    //      ......  
        	
            console.log(document.getElementsByTagName("svg")[0]);
            console.log(document.getElementsByTagName("svg"));

    //here I want to add to   the svg but failed
            document.documentElement.getElementsByTagName("svg").appendChild(iconTemplate);
            }



        </script>
        </head>
        <body>
        <div id="imgWrap"></div> 
        <script type="text/javascript">
        var imgUrl = 'http://c.s-microsoft.com/zh-cn/CMSImages/20150717_1-1.jpg?version=f4c9d0b8-5817-91b4-c2b8-457c92838ef4';

        imgReady(imgUrl,drawSVG,function () {alert('Img Error!');});

        // get wrong here
        pointsSharp();

        </script>
        </body>
        </html>

＆＃13;

从document.getElementsByTagName获取未定义（＆＃34; svg＆＃34;）[0]

0 个答案: