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

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《如何将 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 的根元素（通常是 <svg> 元素）。
5. 将 SVG 元素添加到页面： 使用 DOM API 将 SVG 根元素添加到指定的目标容器中。

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

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

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 文件引入网页并显示其内容？ 》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！