如何将 SVG 文件引入网页并显示其内容？

将引入的 svg 转换为代码形式

在网页中引入 SVG 文件时，查看源代码可能只看到一个类似 ./test.svg 的文件路径，而其他网站引入的 SVG 却是大段的编码。本文将介绍如何通过代码的形式引入 SVG 文件。

为此，可以使用以下步骤：

1. 获取 SVG 文件的内容： 使用 fetch API 获取引入 SVG 文件的内容，并将其解析为文本。
2. 创建 DOMParser： 创建一个 DOMParser 对象，用于将 SVG 文本解析为文档对象模型 (DOM)。
3. 解析 SVG 文本： 使用 DOMParser 的 parseFromString 方法将 SVG 文本解析为 DOM。
4. 获取 SVG 根元素： 从解析的 DOM 中获取 SVG 的根元素（通常是
5. 将 SVG 元素添加到页面： 使用 DOM API 将 SVG 根元素添加到指定的目标容器中。

以下代码示例演示了如何实现此过程：

<p id="test"></p>

登录后复制

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 => {
        // append to the body or do your thing
        document.querySelector('#test').appendChild(actualSVG.documentElement)
    });

登录后复制

以上就是如何将 SVG 文件引入网页并显示其内容？的详细内容，更多请关注抖狐科技其它相关文章！