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

文章不知道大家是否熟悉？今天我将给大家介绍《如何将网页中引入的 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)
  });

使用说明：

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

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

以上就是《如何将网页中引入的 SVG 文件转换为代码？ 》的详细内容，更多关于的资料请关注米云公众号！

Nextjs：具有 API 集成的动态路由