如何将网页引入的 SVG 转换为编码形式展示？

如何将网页引入的 svg 变成编码形式？

您在网站中引入的 SVG 文件以 “./test.svg” 的形式显示在源代码中，而您希望将其转换为一串编码，类似于您在其他网站上看到的。

实现方法：

1. 创建一个 DOM 元素：

<div id="test"></div>

登录后复制

2. 使用 Fetch API 检索 SVG 文件：

fetch('https://static.segmentfault.com/main_site_next/614d2165/_next/static/media/sf-icon-small.4d244289.svg')
    .then(body => body.text())

登录后复制

3. 转换文本为 SVG 文档对象：

.then(svg => (new DOMParser).parseFromString(svg, 'image/svg+xml'))

登录后复制

4. 将 SVG 文档对象附加到 DOM 元素：

.then(actualSVG => {
    document.querySelector('#test').appendChild(actualSVG.documentElement)
});

登录后复制

这将从远程 URL 检索 SVG 文件、将其转换为 SVG 文档对象并将其附加到 HTML 中的指定 DOM 元素中。

以上就是如何将网页引入的 SVG 转换为编码形式展示？的详细内容，更多请关注GTHOST其它相关文章！