无法在画布上加载 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.&nbsp;这里唯一的事情是 SVG 应该是inline。此外，我分叉了您的代码并应用了这些更改，它似乎正在工作：https ://codesandbox.io/s/maze-2wb5dconst canvas = document.querySelector('canvas');const ctx = canvas.getContext('2d');const svg = new Image();var xml = new XMLSerializer().serializeToString(document.querySelector('svg'));// Convert it to base64var svgBase64 = btoa(xml);var imageBase64 = 'data:image/svg+xml;base64,' + svgBase64;svg.src = imageBase64;svg.onload = function() {&nbsp; &nbsp; ctx.drawImage(svg, 0, 0, 32, 32);};svg {&nbsp; &nbsp; 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 />