我正在尝试将 SVG 嵌入到画布上,但在事件阶段 2中,当 SVG 是从我自己的域提供时出现错误。奇怪的是,如果我将相同的图像托管在不同的服务器上,它就可以正常工作。我正在测试的图像是这里的图像。即使我wget
将图像放在图像文件夹中,我也会遇到同样的错误。但是,如果我将它放在带有 的文档中,它确实有效<object data="/images/tiger.svg" type="image/svg+xml"></object>
,但如果我在 javascript 中设置源并在画布上绘制,则不会。
这是我在我的域中托管图像时使用的代码:
var canvas = document.getElementById('my-canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.onload = function() { ctx.drawImage(img, 0, 0); };
img.onerror = function(err) { console.log(err); };
img.src = '/images/tiger.svg'; // replacing this with 'http://phrogz.net/svg/tiger.svg' does work
这是来自 Firebug 的错误数据
NONE 0
defaultPrevented false
multipleActionsPrevented false
stopImmediatePropagation stopImmediatePropagation()
bubbles false
cancelable false
eventPhase 2
isTrusted true
timeStamp 1373387631408000
type "error"