為什么在通過JS為一個HTML文檔添加`svg`標簽時,需要使用`Document.createElementNS`? [英] Why is it necessary to use `document.createElementNS` when adding `svg` tags to an HTML document via JS?

查看:0
本文介紹了為什么在通過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`?的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持IT屋!

查看全文
相關文章
前端開發最新文章
熱門教程
熱門工具
登錄 關閉
掃碼關注1秒登錄
發送“驗證碼”獲取 | 15天全站免登陸
亚洲AV无码国产精品