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

2022-09-24 00:00:00 xml-namespaces svg javascript

这不起作用:

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
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)

这将起作用:

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
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标记或其任何后代时,我都需要显式指定命名空间。

问题1:为什么需要这样做?引用MDN docs on the svg tag:

注意: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)
}

相关文章