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 <image> with properly-namespaced href attribute in it.
2. Uses JS to create a new <image> using setAttributeNS(xlinkNS,'xlink:href',…)
3. Uses JS to create a new <image> using setAttributeNS(xlinkNS,'href',…)
4. Uses JS to clone the original (valid) <image> element.
5. Finally, serializes the XML and logs the result.

Results in WebKit

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

<image xlink:href="…" />
<image xlink:href="…" />
<image href="…" />
<image xlink:href="…" />

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:

<image xlink:href="…" />
<image xlink:href="…" />
<image href="…" xmlns="http://www.w3.org/1999/xlink" />
<image xlink:href="…" />

Results in Firefox

Firebug also shows this for the generated DOM:

<image xlink:href="…" />
<image xlink:href="…" />
<image href="…" />
<image xlink:href="…" />

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

<image xlink:href="…" />
<image xlink:href="…" />
<image xlink:href="…" />
<image xlink:href="…" />

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 <svg> element and properly produces:

<image xlink:href="…" />

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.