首先需要有一段 svg 代码:直接百度找了一个
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="40" fill="red" stroke="%23ededed" stroke-width="3"/></svg>
使用 window.btoa(svg) :
增加前缀:
完成:
效果:
代码:
/** * 第一种方法,url * 异步加载性能最好 * url 可以是下载 url, 也可以是 dataUrl (data:image/jpg;base64,...) */ methodOne(canvas) { let url = this.test(); // 测试 new fabric.Image.fromURL(url, (img) => { img.set(Image.defaultImage(canvas, img)); canvas.add(img); img.center(); img.sendBackwards(); }); } test() { let svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"-10 -18 100 135\"><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" stroke=\"%23ededed\" stroke-width=\"3\"/></svg>"; return 'data:image/svg+xml;base64,' + window.btoa(svg); }