Question

当加载了具有xlinks的SVG文件并从另一个源追加时，xlinks不会链接。我遇到了从服务器加载本地文件和文件的问题。文件加载，所有SVG都在DOM中。一切都很好，除了xlink没有链接。我得到这个代码用于本地文件。

    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);
    }

其中fil [0]是使用files方法加载的本地文件。使用该代码，xlink将链接。当我尝试从服务器加载时，我尝试了以下代码。

        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);

其中ld_tag_nods（）和ld_svg_fil（）是未定义的回调。

此代码将100％加载所有内容，其中包括xlinks，但xlinks不会链接。任何不使用xlink的SVG都会显示，但任何使用xlink的SVG都不会显示。

我应该注意，同一文件用于本地文件和服务器文件。该文件在SVG标记中具有xlink引用。

我想我可以找到解决问题的方法。例如，我可以创建一个可能有用的blob的URL。但是，我想知道为什么服务器代码xlinks不会链接。是因为这些文件来自国外吗？

Answer 1

我认为当节点从一个文件传输到另一个文件时，应该使用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);

为什么不链接xlink？

1 个答案: