deep cloning of SVG node loses xlink namespace information

[pkra]

When deep cloning an SVG, the xlink namespace information gets mangled.
This can lead to rendering issues (e.g., FF and Safari will fail to look up the use target).

Minimal example (tested on jsdom v9.5.0):

jsdom = require('jsdom'); 
doc = jsdom.jsdom();
doc.body.innerHTML = "<svg xmlns:xlink='http://www.w3.org/1999/xlink'><use xlink:href='#test'></use></svg>";
var clone = doc.body.firstChild.cloneNode(true);
console.log(clone.outerHTML);
// expected:
//<svg xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="#test"></use></svg>
// result: 
//<svg xlink="http://www.w3.org/1999/xlink"><use href="#test"></use></svg>

This seems similar to #861.

[pkra]

Note this can be worked around by using the original's outerHTML to build a clone manually.

[Sebmaster]

Are you sure this only occurs after the deepClone? If you print outer html before the clone, I'd expect the XML attributes to get mangled in a similar way, since we only serialise to html (even though we parse XML (kinda) correctly).

[pkra]

If you print outer html before the clone, I'd expect the XML attributes to get mangled in a similar way, since we only serialise to html (even though we parse XML (kinda) correctly).

What you are describing is just #861, right? (Which was fixed). To answer your question, I'm using outerHTML as a workaround in a project so I'm reasonably certain it works.

[pkra]

FYI, if you add console.log(doc.body.firstChild.outerHTML); to the minimal example, its result is correct.

[pkra]

Thanks so much, @domenic !