HTML5 画布 drawImage() 在 FireFox 上不起作用

Question

问题： 我正在做一个项目，我需要在画布上绘制一个符号的动画。这很棒，并且在 chrome 上工作，但在 FireFox 上它不会绘制任何东西。没有错误消息或任何东西。

这甚至是问题吗？

我可以用别的东西来达到同样的效果吗？

这个方法可以在所有浏览器上运行吗？

我的全部功能：

DRAW_ANIM(ctx, dimensions, drawProperties, svg){
        let dashAnim = drawProperties.dash;

        let svgStart = svg[0]; // -- sets up the first part to keep te elements rendered --

        /* -- sets the size a bit smaller than the cell -- */
        dimensions.x += dimensions.w * .1;
        dimensions.y += dimensions.h * .1;
        dimensions.w *= .8;
        dimensions.h *= .8;
        

        let maxRange; // -- number of total elements --
        let range = 1; // -- currently animated --
        let index = 1;

        while (svg[1].indexOf(`id="s${index}"`) != -1) { // -- gets the total number of elements --
            maxRange = index;
            index++;
        }
        

        /* -- from the dashOffset value animates to 0 -- */
        var t = TweenMax.to(dashAnim, this.calcElemAnimDur(maxRange, drawProperties.animDur), { value: 0 });

        render();
        function render() {
            /* -- element id => id="s<index>" because can't be a regular int -- */
            let style = ` 
            #s${range}{
                stroke: ${drawProperties.strokeColor};
                stroke-dashArray: ${svg[2]} !important;
                stroke-dashOffset: ${dashAnim.value} !important;
            }
            `;

            let xml = svgStart + style + svg[1]; // -- inserts the style and joins the svg --
            let svg64 = btoa(xml); // -- b64 encode --
            let b64Start = 'data:image/svg+xml;base64,'; // -- the header --
            let image64 = b64Start + svg64; // -- joins tghe header and the b64 svg --

            let img = new Image(); // -- a new image --

            img.onload = () => { // -- if the image is ready draws it --
                /* -- clears the area to draw a new frame -- */
                ctx.clearRect(dimensions.x - drawProperties.shadowSize * 1.2,
                              dimensions.y - drawProperties.shadowSize * 1.2,
                              dimensions.w + drawProperties.shadowSize * 2.4,
                              dimensions.h + drawProperties.shadowSize * 2.4);

                /* -- sets up the style -- */
                ctx.shadowColor = drawProperties.shadowColor;
                ctx.shadowBlur = drawProperties.shadowSize;

                /* -- draws the image -- */
                ctx.drawImage(img,
                              dimensions.x,
                              dimensions.y, 
                              dimensions.w, 
                              dimensions.h);
            }
            img.src = image64; // -- sets the image to the svg --

            if (dashAnim.value == 0) { // -- if finished with one element gets the next --
                range++;
                svgStart += style; // -- keeps the finished element rendered --
                t.play(0);
            }

            if (range > maxRange) { return } // -- if animation is ready ends the loop --

            window.requestAnimationFrame(render); // -- the next frame --
        }
    }

重要的部分：

            let xml = svgStart + style + svg[1]; // -- inserts the style and joins the svg --
            let svg64 = btoa(xml); // -- b64 encode --
            let b64Start = 'data:image/svg+xml;base64,'; // -- the header --
            let image64 = b64Start + svg64; // -- joins tghe header and the b64 svg --

            let img = new Image(); // -- a new image --

            img.onload = () => { // -- if the image is ready draws it --
                /* -- clears the area to draw a new frame -- */
                ctx.clearRect(dimensions.x - drawProperties.shadowSize * 1.2,
                              dimensions.y - drawProperties.shadowSize * 1.2,
                              dimensions.w + drawProperties.shadowSize * 2.4,
                              dimensions.h + drawProperties.shadowSize * 2.4);

                /* -- sets up the style -- */
                ctx.shadowColor = drawProperties.shadowColor;
                ctx.shadowBlur = drawProperties.shadowSize;

                /* -- draws the image -- */
                ctx.drawImage(img,
                              dimensions.x,
                              dimensions.y, 
                              dimensions.w, 
                              dimensions.h);
            }
            img.src = image64;

Answer 1

解决方案：

问题确实不在于 drawImage() 方法。这是我编写 svg 的方式。

错误：

<svg class="svg x-color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 403.54 403.54">
            <defs>
                <style>
                    .shape{
                        fill: transparent;
                        stroke-dasharray: 570;
                        stroke-dashoffset: 570;
                    }
                </style>
            </defs>
            <line id="s1" class="shape" x1="1.77" y1="1.77" x2="401.77" y2="401.77"/>
            <line id="s2" class="shape" x1="401.77" y1="1.77" x2="1.77" y2="401.77"/>
        </svg>

好：

<svg class="svg x-color" xmlns="http://www.w3.org/2000/svg" width="403.54" height="403.54" version="1.1">
            <defs>
                <style>
                    .shape{
                        fill: transparent;
                        stroke-dasharray: 570;
                        stroke-dashoffset: 570;
                    }
                </style>
            </defs>
            <line id="s1" class="shape" x1="1.77" y1="1.77" x2="401.77" y2="401.77"/>
            <line id="s2" class="shape" x1="401.77" y1="1.77" x2="1.77" y2="401.77"/>
        </svg>

感谢 Helder Sepulveda