xmlserializer strips xlink from xlink:html svg image tag

Question

I\'m creating a javascript interface to dynamically add xlinked images to a map of a classroom.

 //declare the xlink namespace in the svg header
 xmlns:xlink         


        

Answer 1

Further Investigation

I have created a test SVG file on my server that:

1. Has an with properly-namespaced href attribute in it.
2. Uses JS to create a new using setAttributeNS(xlinkNS,'xlink:href',…)
3. Uses JS to create a new using setAttributeNS(xlinkNS,'href',…)
4. Uses JS to clone the original (valid) element.
5. Finally, serializes the XML and logs the result.

Results in WebKit

The Safari and Chrome Developer Tools both show the DOM as:

However, the XML serialization logged to the console (which is what you also get if you right click the Element and say "Copy as HTML") shows this:

Results in Firefox

Firebug also shows this for the generated DOM:

However, the Firebug Console shows a reasonable (expected) serialization:

Further investigation shows that even if you use code like:

img.setAttributeNS(xlinkNS,'GLARBLE:href',…);

Firebug will show "GLARBLE:href" as the name of the attribute, but the XML serialization uses the URI for the namespace, finds the matching namespace on the root element and properly produces:

Conclusion

It appears that the XML serialization performed by Webkit is flawed (broken) when using setAttributeNS to create a namespaced attribute with no namespace prefix provided for the attribute name.

However, if you provide a namespace prefix for the attribute name that matches a namespace prefix already declared on your document, the serialization appears to work correctly.