為什么在通過JS為一個HTML文檔添加`svg`標簽時，需要使用`Document.createElementNS`？ [英] Why is it necessary to use `document.createElementNS` when adding `svg` tags to an HTML document via 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)

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)
}

這篇關于為什么在通過JS為一個HTML文檔添加`svg`標簽時，需要使用`Document.createElementNS`？的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持IT屋！