Javascript 在HTML画布上动态绘制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,0,255);stroke-width:3;stroke:rgb(0,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, 0);
        }

var svgData=''
var img=document.createElement（“img”）；
setAttribute（“src”，“数据：image/svg+xml；base64，”+window.btoa（unescape（encodeURIComponent（svgData）））；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
}

如果我尝试将

img

直接添加到页面，它会显示得非常完美

---

另外，如果我简单地用

FillText

将文本放在

ctx

上，它会正确显示。由此我得出结论，canvas工作得很好。

SVG数据的根元素上的宽度和高度属性不是百分比吗？Robert，啊，在调用drawImage之前，您没有等待图像的onload事件。我用Img.onload=function（）{ctx.drawImage（img，0，0）；}但它没有帮助您需要提供一个示例SVG文件，即我们可以使用示例SVG文件运行的东西。事实上，您可以通过忽略mathjax来简化问题。在您的设置中，只加载一个带有简单rect的测试SVG工作吗？