无法在画布上加载 svg

Question

我这里有一张画布。我正在尝试在此上绘制一个 svg，但它根本不起作用。如果我使用png文件，它可以正常工作。drawPlayer() {    this.xCord = this.colNum * this.width;    this.yCord = this.rowNum * this.height;    let rat = new Image();    let player = this;            rat.onload = function() {player.ctx.drawImage(rat, player.xCord, player.yCord,         player.width, player.height);}    rat.src = "Lik-Rong-IT.svg";}我也试过这种方式-<img src="Lik-Rong-IT.svg" id="rat" style="display: none"/>drawPlayer() {    this.xCord = this.colNum * this.width;    this.yCord = this.rowNum * this.height;    let rat = document.querySelector("#rat");    let player = this;    rat.onload = function() {player.ctx.drawImage(rat, player.xCord, player.yCord,         player.width, player.height);}}但这也不起作用（即使是 png！）。我已经查找了我可以在我的代码中找到的任何错误，但没有运气。请帮我找出问题！链接到项目 - https://codesandbox.io/s/maze-p2pyo

Answer 1

要在画布上绘制 SVG，其中一种方法可以是首先将内联SVG 转换为 Base 64，然后使用drawImage. 这里唯一的事情是 SVG 应该是inline。

此外，我分叉了您的代码并应用了这些更改，它似乎正在工作：https ://codesandbox.io/s/maze-2wb5d

const canvas = document.querySelector('canvas');

const ctx = canvas.getContext('2d');

const svg = new Image();

var xml = new XMLSerializer().serializeToString(document.querySelector('svg'));

// Convert it to base64

var svgBase64 = btoa(xml);

var imageBase64 = 'data:image/svg+xml;base64,' + svgBase64;

svg.src = imageBase64;

svg.onload = function() {

    ctx.drawImage(svg, 0, 0, 32, 32);

};

svg {

    display: none;

}

<svg width="24" height="24" viewBox="0 0 24 24"><path d="M1,12C1,10.19 2.2,8.66 3.86,8.17C5.29,5.11 8.4,3 12,3C15.6,3 18.71,5.11 20.15,8.17C21.8,8.66 23,10.19 23,12C23,13.81 21.8,15.34 20.15,15.83C18.71,18.89 15.6,21 12,21C8.4,21 5.29,18.89 3.86,15.83C2.2,15.34 1,13.81 1,12M14.5,9.25A1.25,1.25 0 0,0 13.25,10.5A1.25,1.25 0 0,0 14.5,11.75A1.25,1.25 0 0,0 15.75,10.5A1.25,1.25 0 0,0 14.5,9.25M9.5,9.25A1.25,1.25 0 0,0 8.25,10.5A1.25,1.25 0 0,0 9.5,11.75A1.25,1.25 0 0,0 10.75,10.5A1.25,1.25 0 0,0 9.5,9.25M7.5,14C8.26,15.77 10,17 12,17C14,17 15.74,15.77 16.5,14H7.5M3,12C3,12.82 3.5,13.53 4.21,13.84C4.07,13.25 4,12.63 4,12C4,11.37 4.07,10.75 4.21,10.16C3.5,10.47 3,11.18 3,12M21,12C21,11.18 20.5,10.47 19.79,10.16C19.93,10.75 20,11.37 20,12C20,12.63 19.93,13.25 19.79,13.84C20.5,13.53 21,12.82 21,12Z" /></svg>

<canvas />