externalHTML 和 XMLSerializer().serializeToString(SvgNode) 之间有什么区别？

Question

SVGNode.outerHTML和 和有什么区别XMLSerializer().serializeToString(SVGNode)？

结果似乎是一样的。

先感谢您。

Answer 1

XMLSerializer 将生成有效的 XML 标记，而outerHTML仅输出 HTML。

HTML 中的 SVG 比解析为独立 XML 文档时要宽松得多。例如，在 HTML 中，您可以省略xmlns="http://www.w3.org/2000/svg"root 上的<svg>，但作为独立文档则不能。对于任何命名空间属性也是如此，HTML 没有命名空间的概念。XMLSerializer 会将其添加回给您，而outerHTML不会。另一个细微的差别是，在 HTML 中，只有 void 元素可以省略其结束标记。在解析 HTML 解析器时，还允许在 和<svg>节点内使用元素，但是当您获取 时outerHTML，序列化器会将其添加回来。XMLSerializer 不会。

const svgNode = document.querySelector("svg");
console.log("outerHTML", svgNode.outerHTML)
console.log("XMLSerializer", new XMLSerializer().serializeToString(svgNode))

<svg><rect width=30 height=30 /></svg>

请注意，这些点很重要，因为如果您想要将生成的字符串作为 SVG 图像加载，则只有 XMLSerializer 生成的字符串才有效：

const svgNode = document.querySelector("svg");
const outerImg = new Image();
outerImg.src = "data:image/svg+xml," + encodeURIComponent(svgNode.outerHTML);
document.body.append("outerHTML:", outerImg, document.createElement("br"));

const serializerImg = new Image();
serializerImg.src = "data:image/svg+xml," + encodeURIComponent( new XMLSerializer().serializeToString(svgNode));
document.body.append("XMLSerializer:", serializerImg, document.createElement("br"));

img, svg { vertical-align: top }

svg:<svg><rect width=30 height=30 /></svg><br>