3

I am using this method to import an SVG doc into a page, and it works pretty well, but in IE9, none of the <image> tags work after the import (they show up as broken images, even though their xlink:href attribute is correct). Why does this happen, and is there any way around it? Here's a simple test page. It works fine in Chrome, FF, etc, but not in IE9.

Community
  • 1
  • 1
lakenen
  • 3,436
  • 5
  • 27
  • 39

2 Answers2

5

Apparently if I drop the xlink: and just use href, if fixes the problem in IE9, but breaks it in Chrome, etc. Weird! If anyone knows why, I'd be happy to accept your answer. See test 2.

Adding href, in addition to xlink:href fixes the issue everywhere.

lakenen
  • 3,436
  • 5
  • 27
  • 39
2

The js implementation of importNode provided in this answer doesn't properly set namespaced attributes, it should use setAttributeNS to set xlink:href correctly. This other implementation of importNode seems to handle that, have you tried using that one instead?

Community
  • 1
  • 1
Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • I did try that, but it gives `SCRIPT5022: DOM Exception: NAMESPACE_ERR (14)` on the line `clone.setAttributeNS(a.namespaceURI,a.nodeName,a.nodeValue);`. – lakenen Jan 30 '13 at 21:48
  • I'm guessing that's about the xmlns:xlink attribute? or is that for any prefixed attribute? – Erik Dahlström Jan 31 '13 at 08:01
  • Seems like it happens for all prefixed attributes. – lakenen Jan 31 '13 at 19:03
  • After further inspection, it seems to throw that error only on the actual `` element, for the following attributes: `xmlns="http://www.w3.org/2000/svg"` and `xmlns:xlink="http://www.w3.org/1999/xlink"`. If I wrap that line in a try...catch block (doing nothing on catch), it seems to import the doc just fine. – lakenen Jan 31 '13 at 19:10
  • I'm accepting your answer, because I think you're correct. Though, I'm still confused as to why those attributes are causing namespace errors. – lakenen Feb 01 '13 at 18:47