使用带有IE的JavaScript中的XMLSerializer时,SVG标记上的不需要的命名空间

Question

我正在尝试使用JavaScript DOM API的XMLSerializer将SVG元素转换为其代表性标记.

这是用于创建元素并将其序列化的基本代码:

var el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
el.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
el.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');

var markup = (new XMLSerializer()).serializeToString(el);
console.log(markup);

在Chrome,Firefox,Safari和Opera中,它可以产生我想要的东西:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>

但是在Internet Explorer 9到IE11中,我得到了这个:

<svg xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" />

IE输出有两个问题:

1. 有重复的xmlns属性.如果我省略了JavaScript的第二行,那么在IE xmlns中,标记中只有一个属性,但在Firefox,Chrome,Safari和Opera中,该属性缺失.
2. 它补充道xml:NS1="".为什么是这样？NS1:然后以xmlns:xlink属性为前缀.

我认为我正在以正确的方式创建属性.例如,在这里使用setAttribute而不是setAttributeNS正确(更多信息),并且更改此似乎不能解决问题.

任何见解都表示赞赏.

编辑:一个相关问题讨论了Chrome序列化中导致遗漏名称空间的错误.与第一个问题部分相关(尽管所有其他浏览器的行为相同),但与第二个问题无关.

Answer 1

好的,我想我已经解决了.按照这篇文章的路径到这个WebKit错误报告和这个测试用例.

如果我将脚本更改为此,那么它的工作原理如下:

var el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
el.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
el.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');

var markup = (new XMLSerializer()).serializeToString(el);
console.log(markup);

啊命名空间.

但是,它仍然存在于Safari 6.05和PhantomJS中仍然存在的旧版WebKit中(错误报告 - 现已修复).据推测,修复程序已合并到最新的Safari更新中(我尚未检查).