Question

我正在尝试在画布上嵌入SVG，但是当我从自己的域提供SVG时，我在event phase 2收到错误。奇怪的是，如果我将相同的图像托管在不同的服务器上，它可以正常工作。我正在测试的图像是here。即使我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"

Answer 1

托管SVG的服务器必须发送正确的标头，而不是每个服务器都配置为执行此操作。

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

如果您正在使用apache，可以使用以下代码将htaccess文件添加到您的目录中：

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

这会发送头文件以提供SVG和压缩版本SVGZ。

希望这有帮助！

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

1 个答案: