将引入的 svg 转换为代码形式
在网页中引入 SVG 文件时，查看源代码可能只看到一个类似 ./test.svg 的文件路径，而其他网站引入的 SVG 却是大段的编码。本文将介绍如何通过代码的形式引入 SVG 文件。
为此，可以使用以下步骤：
获取 SVG 文件的内容： 使用 fetch API 获取引入 SVG 文件的内容，并将其解析为文本。创建 DOMParser： 创建一个 DOMParser 对象，用于将 SVG 文本解析为文档对象模型 (DOM)。解析 SVG 文本： 使用 DOMParser 的 parseFromString 方法将 SVG 文本解析为 DOM。获取 SVG 根元素： 从解析的 DOM 中获取 SVG 的根元素（通常是 元素）。将 SVG 元素添加到页面： 使用 DOM 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 => { // append to the body or do your thing document.querySelector('#test').appendChild(actualSVG.documentElement) });
登录后复制
以上就是如何将 SVG 文件引入网页并显示其内容？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2805601.html
