为什么在通过JS为一个HTML文档添加`svg`标签时,需

Why is it necessary to use `document.createElementNS` when adding `svg` tags to an HTML document via JS?(为什么在通过JS为一个HTML文档添加`svg`标签时,需要使用`Document.createElementNS`?)

本文介绍了为什么在通过JS为一个HTML文档添加`svg`标签时,需要使用`Document.createElementNS`?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这不起作用: 数据-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)
}

这篇关于为什么在通过JS为一个HTML文档添加`svg`标签时,需要使用`Document.createElementNS`?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:为什么在通过JS为一个HTML文档添加`svg`标签时,需

基础教程推荐