Why doesn't xlink link?

Question

When a SVG file that has xlinks are loaded and appended from another source the xlinks don't link. I had the problem with loading both a local file and a file from the server. The files load and all the SVG is in the DOM. Everything works great except the xlink does not link. I got this code to work for local files.

    xmlDoc = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', null);
    xmlDocRoot = xmlDoc.documentElement;

    if (fil[0])
    {
        var blobURLref = window.URL.createObjectURL(fil[0]);

        xmlDoc.onload = function(evt) {
            xmlDocRoot = xmlDoc.documentElement;
            SVGRootImgs.appendChild(xmlDocRoot);
        }
        xmlDoc.src = xmlDoc.load(blobURLref);   

        window.URL.revokeObjectURL(blobURLref);
    }

where fil[0] is the local file that was loaded with files method. With that code the xlinks will link. When I try to load from the server, I tried the following code.

        htmlObjImgs = document.getElementById("hom_img");
        SVGDocImgs = htmlObjImgs.getSVGDocument();
        var crt_date = new Date();
        var fd = new FormData();
        fd.append('usrname', usr_nam);
        fd.append('filename', fil_nam);
        var xhr = new XMLHttpRequest();

        xhr.onload = function() {  

            SVGRootImgs = SVGDocImgs.documentElement;
            var rspns_xhr = xhr.responseXML.documentElement;

            ld_tag_nods(ld_nodes = rspns_xhr.getElementsByTagNameNS(svgns, 'svg'), function(){

                var svg_fil = SVGDocImgs.createElementNS(svgns, "svg");

                ld_svg_fil(svg_fil = SVGDocImgs.importNode(ld_nodes[0], true), function(){

                    SVGRootImgs.appendChild(svg_fil);
                });
            });
        }  
        xhr.onerror = function() {  
            dump("Error while getting XML.");  
        }  
        xhr.open('POST', 'ld_fil.php?nocache='+crt_date, true);
        xhr.responseType = "document";
        xhr.overrideMimeType("image/svg+xml");
        xhr.send(fd);

Where ld_tag_nods() and ld_svg_fil() are undefined callbacks.

This code will load everything 100%, and that includes the xlinks, but the xlinks won't link. Any SVG that doesn't use the xlink displays, but any SVG that uses the xlink will not display.

I should note that the same file is used for both the local file and server file. The file has the xlink references in the SVG tag.

I suppose I could find a way around the problem. For example, I could create a URL to a blob which might work. But, I would like to know why the server code xlinks won't link. Is it because the files come from a foreign source?

Answer 1

I thought that when nodes were transferred from one document to another that importNode() was supposed to be used. The file loads with all the xlinks linking if I skip importNode(). I also don't get any errors or warnings. I guess I got it working, but I certainly don't understand the process. This is the code that works.

htmlObjImgs = document.getElementById("hom_img");
SVGDocImgs = htmlObjImgs.getSVGDocument();
SVGRootImgs = SVGDocImgs.documentElement;

var crt_date = new Date();
var fd = new FormData();
fd.append('usrname', usr_nam);
fd.append('filename', fil_nam);
var xhr = new XMLHttpRequest();

xhr.onload = function() {  
  SVGRootImgs.appendChild(xhr.responseXML.documentElement);
}  
xhr.onerror = function() {  
  dump("Error while getting XML.");  
}  
xhr.open('POST', 'ld_fil.php?nocache='+crt_date, true);
xhr.responseType = "document";
xhr.overrideMimeType("image/svg+xml");
xhr.send(fd);