我正在尝试使用 data: URI
和 canvas.drawImage()
将 SVG 渲染到 Canvas 。这很好用,除了 SVG 中的外部图像不包含在生成的 Canvas 上。
示例 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 之前设置超时,希望这是一个同步问题,但似乎没有帮助。有什么想法吗?
最佳答案
这不是 Canvas 问题。即使您根本不使用 Canvas 而只是将 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;
关于javascript - 使用对 Canvas 的外部引用渲染 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30399403/