为什么在通过JS为一个HTML文档添加`svg`标签时，需要使用`Document.createElementNS`？

问题描述

这不起作用：

const svg = document.createElement('svg')
svg.setAttribute('height', '100')
svg.setAttribute('width', '100')
document.body.appendChild(svg)

const rect = document.createElement('rect')
rect.setAttribute('height', '100%')
rect.setAttribute('width', '100%')
rect.setAttribute('fill', 'red')
svg.appendChild(rect)

这将起作用：

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
svg.setAttribute('height', '100')
svg.setAttribute('width', '100')
document.body.appendChild(svg)

const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
rect.setAttribute('height', '100%')
rect.setAttribute('width', '100%')
rect.setAttribute('fill', 'red')
svg.appendChild(rect)

显然，每次通过JS创建svg标记或其任何后代时，我都需要显式指定命名空间。

注意：xmlns属性只在SVG文档最外层的SVG元素上是必需的。对于内部SVG元素或在HTML文档中不需要。

我将svg嵌套在这里的HTML中，因此xmlns属性不应该是必需的，对吗？

Q2：这种情况可以避免吗？

每次手动键入document.createElementNS('http://www.w3.org/2000/svg', 'rect')都很烦人。

有没有更近的路？

推荐答案

如果调用Document.createElement("a")，它应该创建哪个<a>？HTMLOne还是SVG One？这就是问题所在。同样的脚本等。在appendChild步骤之前，您没有给浏览器任何猜测的方法，到那时已经太晚了。

您可以通过innerHTML在没有命名空间的情况下完成此操作，因为它接受一个带有所有标记的字符串，因此浏览器可以在一个步骤中分析和添加，从而推断出正确的命名空间。

或仅创建包装函数

function createSVGElement(tag) {
  return document.createElementNS('http://www.w3.org/2000/svg', tag)
}