javascript - 在带有 IE 的 JavaScript 中使用 XMLSerializer 时，SVG 标记上不需要的 namespace

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 是正确的 ( more info )，更改它似乎并不能解决问题。

任何见解表示赞赏。

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

Answer 1

好的，我想我已经解决了。追踪来自 this post 的踪迹对此WebKit bug report还有这个test case .

如果我将脚本改成这样，那么它就可以工作了:

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 中失败(bug report - 现已修复)。据推测，该修复已合并到最新的 Safari 更新中(我尚未检查)。