javascript - 为什么通过JS给HTML文档添加 `document.createElementNS`标签时需要使用 `svg`？

Question

这行不通:

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 标记或其任何后代时，我都需要显式指定 namespace 。

问题1:为什么这是必要的？引用MDN docs on the svg tag :

Note: The xmlns attribute is only required on the outermost svg element of SVG documents. It is unnecessary for inner svg elements or inside HTML documents.

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

问题2:这种情况可以避免吗？

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

有没有更短的方法？

Answer 1

如果你调用 document.createElement("a") ， <a>它应该创造吗？ HTML 的还是 SVG 的？问题就在这里。同上脚本等。在appendChild步骤之前，您没有给浏览器任何猜测的机会，到那时就为时已晚了。

您可以通过innerHTML在没有命名空间的情况下执行此操作因为这需要一个包含所有标记的字符串，以便浏览器可以一步解析和添加，从而推断出正确的命名空间。

或者只是创建一个包装函数

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