渲染具有对Canvas的外部引用的SVG [英] Render SVG with external references to Canvas
本文介绍了渲染具有对Canvas的外部引用的SVG的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用 data:URI
和 canvas.drawImage()
。
示例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:
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之前设置一个超时,希望这将是一个同步问题,但是它似乎没有帮助。任何想法?
I've tried setting a timeout before calling drawImage, hoping that it would be a synchronization issue, but it did not seem to help. Any ideas?
推荐答案
这不是画布问题。它不会工作/将看起来相同,即使你不使用画布,只是将您的HTMLImageElement附加到DOM。请参阅:
This is not a canvas issue. It won't work/will look the same even if you are not using the canvas at all and just appending your HTMLImageElement to the DOM. see:
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/
这篇关于渲染具有对Canvas的外部引用的SVG的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文