JS如何将SVG字符串做为图片进行加载

可以通过将SVG字符串转为 blob 对象并生成 URL 赋值到图片的 src 属性上进行加载。本文详细介绍了如何实现

实现

html

            <img id="img" />
        

js

            //获取图片对象
            const image = document.getElementById('img');

            //一个 svg 字符串
            let svgStr = `
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" >
                    <circle fill="#3C3C3C" cx="100" cy="100" r="100"/>
                </svg>`;

            //把 svg 字符串转为 blob 对象
            let blob = new Blob([svgStr], {type: 'image/svg+xml'});

            //生成 url
            let url = URL.createObjectURL(blob);

            //将 url 赋值到 src 上即可加载
            image.src = url;
        

结果展示

说明

代码的注释已经详细说明了实现过程。更多信息请查看以下链接：

» 关于 Blob 对象详细用法

» 关于 URL.createObjectURL 详细用法