XMLSerializer mess up links - svg

Question

I have a svg object with defs:
defs.append('svg:pattern')
.attr('id', 'blue')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', '40')
.attr('height', '39')
.append('svg:image')
.attr('xlink:href', 'images/blue.png')
.attr('width', '40')
.attr('height', '39');
In my code I use XMLSerializer to POST data:
var svg1 = tmp.getElementsByTagName("svg");
var svg_xml = (new XMLSerializer).serializeToString(svg1[0]);
In Safari I get the desired result:
<svg width="850" height="200">
<pattern id="blue" patternUnits="userSpaceOnUse" width="40" height="39">
<image xlink:href="images/blue.png" width="40" height="39"></image>
</pattern>
In Firefox or IE I get strange results:
<svg xmlns="http://www.w3.org/2000/svg" width="850" height="200">
<defs>
<pattern id="blue" patternUnits="userSpaceOnUse" width="40" height="39">
<image a0:href="images/plateColor/blue.png" xmlns:a0="http://www.w3.org/1999/xlink" width="40" height="39"/>
</pattern>
What am I doing wrong?
Thanks
Rolf

Answer 1

This is not a bug in D3.js. Here's how you can solve the problem for any SVG:
First, grab your SVG element:
svg = document.querySelector("svg");
Now, an SVG element can have more than one of these attributes in different namespaces, so we have to remove these first to prevent duplicate attributes. Otherwise the SVG is no longer valid after being serialized to a string by XMLSerializer:
svg.removeAttribute("xmlns");
svg.removeAttribute("xmlns:xlink");
Finally, add the same attributes, but with the proper namespace:
prefix = "http://www.w3.org/2000/xmlns/";
if (!svg.hasAttributeNS(prefix, "xmlns")) {
svg.setAttributeNS(prefix, "xmlns", "http://www.w3.org/2000/svg");
}
if (!svg.hasAttributeNS(prefix, "xmlns:xlink")) {
svg.setAttributeNS(prefix, "xmlns:xlink", "http://www.w3.org/1999/xlink");
}
Now the XMLSerializer should no longer produce a weird output.