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

Unwanted namespaces on SVG markup when using XMLSerializer in JavaScript with IE

本文关键字：SVG 不需要 命名空间 JavaScript XMLSerializer IE      更新时间：2023-09-26

我正在尝试使用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序列化中的一个错误，该错误导致省略命名空间。与第一个问题部分相关（尽管所有其他浏览器的行为相同），但与第二个问题无关。

好的，我想我已经解决了。跟随从这篇文章到这个 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更新中（我尚未检查）。

相关文章：