javascript - 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="http://www.w3.org/1999/xlink"
...
//the code to append the image
var temp = document.createElementNS(svgns,"image");
temp.setAttributeNS(null,"x","0");
temp.setAttributeNS(null,"y","0");
temp.setAttributeNS(null,"height","80");
temp.setAttributeNS(null,"width","40");
temp.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","roomlayouts/items/ cactus.svg");

The image appends and displays on the screen with tags like so:

<image x="0" y="0" height="80" width="40" xlink:href="roomlayouts/items/cactus.svg"></image>

But once I pass it through the xmlserializer so that I can save the file, it strips the xlink tag off the front:

var svgDoc = document.getElementById('SVGMap');
var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(svgDoc.firstChild);

creating:

<image x="0" y="0" width="40" height="80" href="roomlayouts/items/cactus.svg"></image>

This means the svg loses the cactii. Any ideas how I can get the xmlserializer to keep the xlink prefix?

============================== NOTE: this was a bug in webkit that has now been resolved. See discussion below for link to bug report

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.