如何將網頁中通過img標簽引入的SVG文件轉換為可直接嵌入HTML的代碼？

將網頁中通過img標簽引入的svg文件轉換為可直接嵌入html的代碼

許多開發(fā)者在網頁開發(fā)中會遇到這樣的問題：如何將外部引入的SVG文件轉換成可以直接嵌入HTML代碼的形式？ 直接使用標簽引入的SVG文件，查看頁面源代碼時，只會顯示

問題在于，用戶使用引入SVG，希望將其轉換為直接嵌入HTML的代碼。 解決方法的關鍵在于使用JavaScript動態(tài)加載并解析SVG文件。

我們可以利用fetch API獲取SVG文件的文本內容，然后用DOMParser將其解析為SVG文檔對象模型。最后，將解析后的SVG文檔對象添加到頁面中。 以下是一個具體的代碼示例：

<div id="test"></div>  <script>     fetch('https://static.segmentfault.com/main_site_next/614d2165/_next/static/media/sf-icon-small.4d244289.svg')         .then(response => response.text())         .then(svg => (new DOMParser()).parseFromString(svg, 'image/svg+xml'))         .then(actualSVG => {             document.getElementById('test').appendChild(actualSVG.documentElement);         }); </script>

這段代碼首先使用fetch函數獲取指定的SVG文件。response.text()方法將響應內容轉換為文本字符串。DOMParser將文本字符串解析為SVG文檔對象。最后，appendChild方法將解析后的SVG元素添加到id為”test”的div元素中。 這樣，SVG代碼就成功嵌入到HTML中了。 請注意，你需要預先在HTML中創(chuàng)建一個容器元素（例如

），用于容納解析后的SVG內容。