Firefox无法在Canvas上绘制SVG图像

Question

我试图将SVG图像（从文件中）绘制到HTML画布中，但是在Firefox上无法绘制。

首先，我创建一个<canvas>元素，然后在<img>中的一个index.html标签中加载SVG：

<canvas id="canvas" width="400" height="400" style="background-color: black;" />
<img id="top-bank" src="top_bank.svg" />

然后，在我的JavaScript代码中，我使用document.getElementById方法检索图像：

window.addEventListener("load", function (event) {
    const canvasElement = document.getElementById("canvas");
    const bankTop = document.getElementById("top-bank");

    const ctx = canvasElement.getContext("2d");
    ctx.drawImage(bankTop, 0, 0, 300, 300);
});

这是现场演示：https://thomaskerbrat.github.io/firefox-canvas-svg/

当我在Firefox（版本68.0.1-64位）中加载此代码时，SVG不会在画布上绘制。

我在Safari（版本12.1-14607.1.40.1.4）上尝试过，并且可以正常使用。

我尝试在<img>元素上设置宽度和高度，因为有时在看DevTools时会得到大小为零乘零的图像。

*编辑：我已将链接添加到实时演示中。