我的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不在画布中绘制。
那为什么不起作用？