1

The following code works fine in chrome and Firefox, but breaks in IE 9.0

//select div where svg is to be inserted
var selSVG = document.getElementById('SVGMap');
//clear any SVG
while (selSVG.hasChildNodes()) {
selSVG.removeChild(selSVG.lastChild);
}
//add the new svg
selSVG.appendChild(loadXML("roomlayouts/"+SelectedRoomAddress));

with loadXML(...) returning an svg document from another folder and with the error on the last line of DOM Exception: HIERARCHY_REQUEST_ERR (3) line 300 character 2

Any ideas why it's not working in IE 9.0?

The implementation is here: http://chocolatezombies.com/classroom/classroom.html

pluke
  • 3,832
  • 5
  • 45
  • 68
  • What, exactly, is being returned by `loadXML`? – James Nov 10 '11 at 11:52
  • it returns a full SVG document for xample: http://chocolatezombies.com/classroom/roomlayouts/S110.svg – pluke Nov 10 '11 at 12:07
  • @999 I should have said it returns the documentelement of the SVG file. sorry, just took a harder look at my code. function copied below function loadXML(url) { var xmlhttp = new window.XMLHttpRequest(); xmlhttp.open("GET", url, false); //stops the annoying caching! xmlhttp.setRequestHeader("Cache-Control", "no-cache"); //as it says above xmlhttp.send(null); return xmlhttp.responseXML.documentElement; } – pluke Nov 10 '11 at 21:19

1 Answers1

3

You need to import the element from the loaded document into the document of selSVG before you may append it. Per the specs, you would do:

var room = loadXML(...);
if (room.nodeType==9){         // You can't import entire documents, so
  room = room.documentElement; // get the root node of the document
}
room = selSVG.ownerDocument.importNode( room );
selSVG.appendChild( room );

However, IE9 does not properly implement importNode. I have provided a workaround method for this as part of my answer to this question: How do I dynamically insert an SVG image into HTML?

Community
  • 1
  • 1
Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • hi @Phrogz, I'm struggling to get this working. I took a look at your example code attached and it keeps bringing up the following error in IE9.0: `Unable to get value of the property 'namespaceURI': object is null or undefined` on the following line `var clone = doc.createElementNS(node.namespaceURI,node.nodeName);` to clarify: loadXML(...) is returning the following: `xmlhttp.responseXML.documentElement;` – pluke Nov 15 '11 at 15:35
  • To clarify further, the SVG I am loading is created in inkscape and has all the appropriate namespace information namely: `xmlns="http://www.w3.org/2000/svg"` – pluke Nov 15 '11 at 15:47
  • @pluke Make a test case showing this problem and host it online if you want further help; otherwise, you'll need to learn to debug. (Hint: that error means that the value of `node` is null. You need to figure out why.) – Phrogz Nov 15 '11 at 16:43
  • Hi @Phrogz, I have found the issue. The SVGs that inkscape output have more namespace information than your `xmlns="http://www.w3.org/2000/svg"` Such as: xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"' Your code `if (a.nodeName=="xmlns") continue; clone.setAttributeNS(a.namespaceURI,a.nodeName,a.nodeValue);` can't handle subsets of the xmlns. Sorry about the slow response, I have limited access to a Win7 machine. Try loading this: http://chocolatezombies.com/classroom/roomlayouts/S110.svg with your example – pluke Nov 22 '11 at 15:24
  • @pluke Ah, right you are. I've fixed my examples to use `if (/^xmlns\b/.test(a.nodeName)) continue;` instead and confirmed that your S110.svg file is able to be loaded in IE9 with that change. Thanks for the report. – Phrogz Nov 22 '11 at 16:52
  • The `cloneToDoc` function described in @Phrogz's linked answer solves the problem with IE9 (and saves my life :). With Chrome (38 - as the time of writing this), everything works also without `importNode`. E.g.: `var room = loadXML(...); selSVG.appendChild(room.documentElement)`. BTW, the SVG I'm using is also created with Inkscape. – guidoman Nov 07 '14 at 11:48