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?