如何将网页中引入的 SVG 文件转换为代码？

将网页中引入的 svg 转换为代码

问题：

在网页中引入了一个 SVG 文件，但是源代码中只显示一个简单的 SVG 文件路径 (例如，./test.svg)，而其他网站的 SVG 引入通常是一大串编码。如何实现这种编码引入方式？

答案：

可以使用 JavaScript 的 fetch 和 DOMParser API 来实现：

代码：

// 取代你想获取SVG的文件地址
fetch('https://static.segmentfault.com/main_site_next/614d2165/_next/static/media/sf-icon-small.4d244289.svg')
  .then(body => body.text())
  .then(svg => (new DOMParser).parseFromString(svg, 'image/svg+xml'))
  .then(actualSVG => {
    // 将实际的SVG添加到页面中
    document.querySelector('#test').appendChild(actualSVG.documentElement)
  });

使用说明：

将代码中的 SVG 文件 URL 替换为你自己的 URL。
将 #test 替换为你希望插入 SVG 的元素 ID。

通过这种方法，你可以从网页中获取 SVG 的实际编码，并将其动态添加到你的代码中。

以上就是如何将网页中引入的 SVG 文件转换为代码？的详细内容，更多请关注其它相关文章！