在HTML Canvas上绘制动态创建的SVG

如何解决在HTML Canvas上绘制动态创建的SVG

我将简单的svg定义为字符串，创建img，使用该字符串初始化img.src，然后在画布上绘制该img。但是画布毕竟是空的（（（（。

这是我的代码：

        var svgData = '<svg xmlns="http://www.w3.org/2000/svg" width="400" height="110"><rect width="300" height="100" style="fill:rgb(0,255);stroke-width:3;stroke:rgb(0,0)" /></svg>'

        var img = document.createElement("img");
        img.setAttribute("src","data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgData))) );
        img.onload = function() {
            ctx.drawImage(img,0);
        }

如果我尝试将img直接附加到页面上，则会显示完美。

如果我只用ctx将文本放在FillText上，它也会正确显示。由此我得出结论，画布效果很好。