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.
3
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?
-
I did try that, but it gives
SCRIPT5022: DOM Exception: NAMESPACE_ERR (14)
on the lineclone.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 8:01
-
-
After further inspection, it seems to throw that error only on the actual
<svg>
element, for the following attributes:xmlns="http://www.w3.org/2000/svg"
andxmlns: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 1 '13 at 18:47
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.
-
Thanks for adding the real fix! It worked for me too...
<svg><use ng-attr-xlink:href="{{expression}}" xlink:href="" ng-attr-href="{{expression}}"></svg>
– Larz Feb 18 '16 at 15:31