javascript - .outerHTML 中不存在命名空间属性

Question

在 HTML5/JavaScript 中，如果我以编程方式创建一个命名空间 dom 节点，如下所示:

svgElt = document.createElementNS("http://www.w3.org/2000/svg", 'svg')

节点“知道”它自己的命名空间，我可以这样检索:

svgElt.namespaceURI // result: "http://www.w3.org/2000/svg"

但是命名空间不被视为“正常”属性:

svgElt.getAttribute('xmlns') // result: null

所以以编程方式创建的节点的行为不同于等效的“直”节点

<svg xmlns="http://www.w3.org/2000/svg" id="mySVG"></svg>

其中 .getAttribute作品:

document.getElementById('mySVG').getAttribute('xmlns') // result: "http://www.w3.org/2000/svg"

这是我使用 .outerHTML 时的潜在问题并需要结果中包含的命名空间信息。以编程方式创建的节点的命名空间信息可能会丢失，我可能必须手动添加它；这似乎是“我不应该关心的事情”——这就是问题所在。

您需要的示例 .outerHTML当您想将内联 SVG 节点转换为 Image 时，其中包含命名空间信息(请参阅 this question ，Hubert OG 的回答)通过将图像源设置为数据 url ，如

'data:image/svg+xml,' + your_svg_element.outerHTML

我做的是

svgNode.setAttribute('xmlns', svgNode.namespaceURI)

SVG -> 图像转换(正如我实现的那样)没有这个技巧就无法工作；另请参阅我对上面链接问题的回答。

有没有更好/更优雅的方法来做到这一点？ svgElt.getAttribute('xmlns')的目的是什么？返回 null ?缺陷还是特点？

Answer 1

您可以简单地使用 XMLSerializer为此，这会将您的 DOM 树字符串化为 xml，从而保留 namespace 。

const svgElt = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
const serialized = new XMLSerializer().serializeToString(svgElt);
console.log(serialized);