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输出有两个问题：

存在重复的xmlns个属性。如果我省略了JavaScript的第二行，那么在IE中，标记中只有一个xmlns属性，但在Firefox，Chrome，Safari和Opera中，该属性缺失。
它添加了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（bug report中仍然存在的旧版WebKit中 - 现在已修复）。据推测，修复程序已合并到最新的Safari更新中（我尚未检查过）。

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

1 个答案: