如何将网页引入的svg转换为代码形式
在网页中引入svg文件后，源代码通常只会显示一个文件路径，例如./test.svg。而其他网站引入svg时，却是一大串编码。如何实现这种编码引入方式呢？
解决方案：
通过使用JavaScript的fetch()和DOMParser()，我们可以将svg文件转换为代码形式。具体步骤如下：
使用fetch()获取svg文件的文本内容。使用text()方法将响应体转换为文本。使用DOMParser()将文本解析为xml文档。从xml文档中获取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文件转换为代码，方便我们进一步操作或修改。
以上就是如何将网页引入的 SVG 文件转换为代码形式？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2805599.html
