是否可以從現有的 SVG 文件創建一個 DOM 節點（然后將其附加到某個 DOM 元素中）？

Question

如果有人幫助我解決以下問題，我將不勝感激。 在渲染的 DOM 樹中有一個跨度元素，其中包含一些 svg 元素：

<...>
  <span>
    <svg>
      <path d="..."></path>
    </svg>
  </span>
<...>

我需要用我的自定義 SVG 圖像替換給定的 svg 元素。 最好使用現有的 SVG 文件作為生成新 svg 元素的源，然后將其附加到父跨度元素中。 不幸的是，我無法自己弄清楚如何做到這一點。 當我嘗試從現有的 SVG 文件導入必要的圖像並將其附加到 span 元素中時，我遇到以下錯誤：

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

我現在發現的唯一 JS 解決方案是創建一個 function ，它通過字符串重新創建我的 SVG 圖像字符串，如下所示：

 const customizeSelectionDropdownSVG = () => { const createNewSVG = () => { const xmlns = "http://www.w3.org/2000/svg"; const boxWidth = 16; const boxHeight = 16; const newSVG = document.createElementNS(xmlns, "svg"); newSVG.setAttributeNS(null, "viewBox", `0 0 ${boxWidth} ${boxHeight}`); newSVG.setAttributeNS(null, "width", boxWidth); newSVG.setAttributeNS(null, "height", boxHeight); newSVG.style.display = "block"; const path = document.createElementNS(xmlns, "path"); path.setAttributeNS(null, "class", "b"); path.setAttributeNS(null, "d", "M160.294,147.293l-2.829-2.829a1,1,0,0,0-1.414,1.415L158.173,148l-2.122,2.121a1,1,0,0,0,1.414,1.415l2.829-2.829A1,1,0,0,0,160.294,147.293Z"); path.setAttributeNS(null, "transform", "translate(-150 -140)"); newSVG.appendChild(path); return newSVG; }; const customizedSelectionDropdownSVG = createNewSVG(); const selectorValue = "span"; const svgContainer = document.querySelectorAll(selectorValue); const oldSVG = document.querySelectorAll(`${selectorValue} svg`); if (oldSVG && svgContainer) { for (let i = 0; i < oldSVG.length; i++) { oldSVG[i].remove(); } for (let j = 0; j < svgContainer.length; j++) { svgContainer[j].appendChild(customizedSelectionDropdownSVG); } } };

是的，它有效。 但看起來很冗長？ 所以我想知道是否有更優化的解決方案。 在此先感謝您的幫助。

Answer 1

將現有的 SVG 文件用作生成新 svg 元素的源將是完美的

• 創建一個香草W3C 標准 Web 組件<load-svg>
• 將 SVG src加載為文本
• 將其設置為<load-svg> innerHTML

 <load-svg src="https://load-file.github.io/heart.svg"></load-svg> <script> customElements.define("load-svg", class extends HTMLElement { async connectedCallback( src = this.getAttribute("src") ) { this.innerHTML = await (await fetch( src )).text() } }) </script> <style> svg { height: 180px } /* fit in SO snippet window */ </style>

• 如果您需要加載其他內容，請調用：

document.querySelector("load-svg")
        .connectedCallback("https://load-file.github.io/heart.svg")

文檔和更高級的用法：

https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd

Answer 2

您可以通過將 innerHTML 設置為空字符串來刪除原始 svg 元素。

 const xmlns = "http://www.w3.org/2000/svg"; const boxWidth = 16; const boxHeight = 16; const newSVG = document.createElementNS(xmlns, "svg"); newSVG.setAttributeNS(null, "viewBox", `0 0 ${boxWidth} ${boxHeight}`); newSVG.setAttributeNS(null, "width", boxWidth); newSVG.setAttributeNS(null, "height", boxHeight); newSVG.style.display = "block"; const path = document.createElementNS(xmlns, "path"); path.setAttributeNS(null, "class", "b"); path.setAttributeNS(null, "d", "M160.294,147.293l-2.829-2.829a1,1,0,0,0-1.414,1.415L158.173,148l-2.122,2.121a1,1,0,0,0,1.414,1.415l2.829-2.829A1,1,0,0,0,160.294,147.293Z"); path.setAttributeNS(null, "transform", "translate(-150 -140)"); newSVG.appendChild(path); document.getElementById('span01').innerHTML = ''; document.getElementById('span01').appendChild(newSVG);

 <span id="span01"> <svg></svg> </span>