前端svg图像的编码显示方法
许多网站将SVG图像以编码形式嵌入网页,而不是直接引用SVG文件。本文将探讨如何将后端返回的SVG图形链接,以编码的形式在前端显示,避免直接使用这样的引用方式。
问题描述中提到,一个网站直接引用SVG文件,而另一个网站则使用一大串编码来嵌入SVG。这种编码形式的优势在于,它将SVG文件内容直接嵌入HTML中,避免了额外的HTTP请求,从而提高页面加载速度。此外,这种方式也使得SVG图像更容易被修改和定制。
实现这种编码形式的SVG引入,可以使用JavaScript的fetch API来获取SVG文件内容。以下代码片段展示了如何实现:
<div id="test"></div>
<script>
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)
});
</script>
这段代码首先使用fetch API获取指定URL的SVG文件内容。然后,body.text()方法将响应体转换为文本字符串。接着,DOMParser将SVG文本字符串解析成一个SVG文档对象。最后,将解析后的SVG文档对象添加到页面中的指定元素中。 这便完成了将后端返回的SVG图形链接以编码的形式在前端展示的过程。 需要注意的是,你需要在HTML中预先准备好一个容器元素(例如
),用于存放解析后的SVG内容。以上就是前端如何显示后端返回的SVG编码图像?的详细内容,更多请关注知识资源分享宝库其它相关文章!
版权声明
本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com
发表评论