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

I am trying to use the JavaScript DOM API's XMLSerializer to convert an SVG element to its representative markup.

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

This is the basic code used to create the element and serialize it:

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

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);

In Chrome, Firefox, Safari and Opera, it produces what I want:

在Chrome，Firefox，Safari和Opera中，它可以满足我的需求：

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

But in Internet Explorer 9 through to IE11, I get this:

但是在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" />

There are two problems with IE's output:

IE的输出有两个问题：

There are duplicate xmlns attributes. If I omit the second line of the JavaScript, then in IE there is just only one xmlns attribute in the markup, but in Firefox, Chrome, Safari and Opera, the attribute is missing.
有重复的xmlns属性。如果我省略了JavaScript的第二行，那么在IE中，标记中只有一个xmlns属性，但在Firefox，Chrome，Safari和Opera中，该属性缺失。
It adds xml:NS1="". Why is this? NS1: is then prefixed to the xmlns:xlink attribute.
它添加了xml：NS1 =“”。为什么是这样？ NS1：然后以xmlns：xlink属性为前缀。

I think that I'm creating the attributes the correct way. For example, using setAttribute instead of setAttributeNS is correct here (more info), and changing this doesn't seem to fix the problem.

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

Any insights appreciated.

任何见解都表示赞赏。

Edit: a related issue discusses a bug in Chrome's serialization that leads to the omission of namespaces. Partially relevant to the first problem (although all the other browsers act the same), but not relevant to the second problem.

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

1 个解决方案

#1

OK, I think I've solved it. Followed the trail from this post to this WebKit bug report and this test case.

好的，我想我已经解决了。跟着这篇帖子到这个WebKit错误报告和这个测试用例。

If I change the script to this, then it works:

如果我将脚本更改为此，则它可以正常工作：

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);

Ah namespaces.

啊命名空间。

But, it fails in an older version of WebKit that is still present in Safari 6.05 and PhantomJS (bug report - now fixed). Presumably the fix is incorporated into the latest Safari update (I haven't yet checked).

但是，它仍然存在于Safari 6.05和PhantomJS中仍然存在的旧版WebKit中（错误报告 - 现已修复）。据推测，该修复程序已纳入最新的Safari更新（我尚未检查）。

#1