0

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?

4

1 回答 1

0

我认为当节点从一个文档转移到另一个文档时，应该使用 importNode()。如果我跳过 importNode()，该文件会加载所有 xlinks 链接。我也没有收到任何错误或警告。我想我得到了它的工作，但我当然不明白这个过程。这是有效的代码。

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);
于 2013-03-16T05:37:48.560 回答