使用Canvas

Question

我正在尝试使用data: URI和canvas.drawImage()将SVG渲染到画布。这很有效，除了SVG中的外部图像不包含在生成的画布中。

示例HTML（live jsFiddle example）：

<canvas id="canvas" width="400" height="400"></canvas>
<div id="container">
    <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/>
      <image preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://upload.wikimedia.org/wikipedia/en/7/70/Example.png" width="80" height="80"></image>
    </svg>
</div>

使用Javascript：

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    svg = document.getElementById('container').innerHTML,
    img = new Image();

img.onload = function () {
    ctx.drawImage(img, 0, 0);
};
img.src = 'data:image/svg+xml,' + svg;

我在调用drawImage之前尝试设置超时，希望它会出现同步问题，但似乎没有帮助。有什么想法吗？

Answer 1

这不是画布问题。即使你根本没有使用画布而只是将HTMLImageElement附加到DOM，它也不会工作/看起来会一样。见：

    var svg = document.getElementById('container').innerHTML,
    img = new Image();

img.onload = function () {
    document.body.appendChild(img); // img does not contain Wikipedia image
};
img.src = 'data:image/svg+xml,' + svg;

http://jsfiddle.net/ss5bjooj/2/