画布上的Javascript SVG绘图在事件阶段2失败

Javascript SVG drawing on canvas failing at event phase 2

本文关键字:事件 失败 绘图 Javascript SVG      更新时间:2023-09-26

我试图在画布上嵌入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"

托管SVG的服务器必须发送正确的标头,而不是每个服务器都配置为这样做。

这里有一个很好的导游http://kaioa.com/node/45

如果您使用的是apache,您可以使用以下代码向目录中添加一个htaccess文件:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

这将发送头文件来为SVG和压缩版本SVGZ提供服务。

希望这能有所帮助!