Javascript 在Firefox中将SVG绘制到画布时出现InvalidStateError（适用于Chrome）

我的代码在Chrome中运行得很好，但在Firefox中会抛出错误。控制台显示：

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

这是我的代码：

glitchElement('http://naratif.jvitasek.cz/images/past-no-b.svg', 'canvas1');
glitchElement('http://naratif.jvitasek.cz/images/medialni-no-b.svg', 'canvas2');
glitchElement('http://naratif.jvitasek.cz/images/subverz-no-b.svg', 'canvas3');
function glitchElement(sourceImg, idCanvas) {
    var canvas = document.getElementById(idCanvas),
        context = canvas.getContext('2d'),
        img = new Image(),
        w,
        h,
        offset,
        glitchInterval;

    img.src = sourceImg;
    img.onload = function() {
        init();
        window.onresize = init;
        redraw();
    };

    var init = function() {
        clearInterval(glitchInterval);
        canvas.width = w = window.innerWidth;
        offset = w * 0.1;
        canvas.height = h = ~~(230 * ((w - (offset * 2)) / img.width));
        glitchInterval = setInterval(function() {
            clear();
            console.log(offset);
            console.log(w - (offset*2));
            console.log(h);
            context.drawImage(img, 0, 0, img.width, 230, offset, 0, w - (offset * 2), h);
            glitchImg();
            setTimeout(function() {
                clear();
                redraw();
            }, randInt(100,130)); // doba, po kterou je obrazek glitchnut
        }, randInt(3000,7000)); // interval mezi kazdym glitchem
    };

    var clear = function() {
        context.rect(0, 0, w, h);
        context.fillStyle = "white";
        context.fill();
    };

    var glitchImg = function() {
        for (var i = 0; i < randInt(1, 7); i++) {
            var x = Math.random() * w;
            var y = Math.random() * h;
            var spliceWidth = w - x;
            var spliceHeight = randInt(5, h / 3);
            context.drawImage(canvas, 0, y, spliceWidth, spliceHeight, x, y, spliceWidth, spliceHeight);
            context.drawImage(canvas, spliceWidth, y, x, spliceHeight, 0, y, x, spliceHeight);
        }
    };

    var randInt = function(a, b) {
        return ~~(Math.random() * (b - a) + a);
    };

    function redraw() {
        context.drawImage(img, 0, 0, img.width, 230, offset, 0, w - (offset * 2), h);
    }
}

glitchElement（'http://naratif.jvitasek.cz/images/past-no-b.svg","游说1",；
小故障http://naratif.jvitasek.cz/images/medialni-no-b.svg","游说2",；
小故障http://naratif.jvitasek.cz/images/subverz-no-b.svg","游说3",；
函数故障元素（sourceImg、idCanvas）{
var canvas=document.getElementById（idCanvas），
context=canvas.getContext（'2d'），
img=新图像（），
W
H
抵消，
油嘴滑舌；
img.src=sourceImg；
img.onload=函数（）{
init（）；
window.onresize=init；
重画（）；
};
var init=函数（）{
清除间隔（glitchInterval）；
canvas.width=w=window.innerWidth；
偏移量=w*0.1；
canvas.height=h=~~（230*（（w-（偏移量*2））/img.width））；
glitchInterval=setInterval（函数（）{
清除（）；
控制台日志（偏移量）；
控制台日志（w-（偏移量*2））；
控制台日志（h）；
绘图图像（img，0，0，img.width，230，偏移量，0，w-（偏移量*2），h）；
滑音（）；
setTimeout（函数（）{
清除（）；
重画（）；
}，randInt（100130））；//doba，po kterou je obrazek glitchnut
}，randInt（30007000））；//区间mezi-kazdym故障
};
var clear=function（）{
rect（0,0,w,h）；
context.fillStyle=“白色”；
context.fill（）；
};
var glitching=函数（）{
对于（var i=0；i

---

我读到这可能是Firefox中的一个bug，但我尝试了一些方法来解决这个问题（比如添加宽度/高度、canvg等等），但似乎没有任何效果。有谁能告诉我如何解决这个问题，使代码也能在Firefox中运行吗？

为了使SVG图像文件必须有一个根

元素，该元素同时具有宽度和高度属性，两者都不能是百分比。

尝试在外部SVG元素上指定SVG图像的宽度和高度属性，这些属性的值不是百分比。@RobertLongson因此，如果我在画布中绘图，我应该为该元素设置宽度和高度吗？我很难理解您所说的外部SVG元素是什么意思。每个SVG文件中的根

元素。所以让文件@RobertLongson的事情是，当我查看我的源代码时，我没有看到任何SVG元素。我只看到画布，里面没有任何元素。我看到三个，这个，这个，这个