javascript - 如何在画布上从foreignObject绘制图像？

我的xml代码如下：

    svg = '<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">' +
    '<foreignObject width="100%" height="100%">' +
 '<body xmlns="http://www.w3.org/1999/xhtml" style="margin:0px;white-space:pre;line-height:1;">' +            
    '<img src="foo.png" width="300" height="300" />' + 
    '</body>' +
    '</foreignObject>' +
    '</svg>';

我在画布上绘制此svg如下：

data = encodeURIComponent(svg);

var img = new Image();

img.onload = function() {

    ctx.drawImage(img, 0, 0);

};

img.src = "data:image/svg+xml," + data;

问题在于，foreignObject中的foo.png不在画布中绘制。

那为什么不起作用？

如何在画布上从foreignObject绘制图像？

0 个答案: