JavaScript在canvas上绘制SVG失败，事件阶段2出现问题

Question

我试图在画布上嵌入一个SVG，但是当SVG来自我的域时，在event phase 2处会出现错误。奇怪的是，如果同一张图片托管在不同的服务器上，它就能正常工作。我正在测试的图像是这里。即使我使用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"

- konapun

---

你可以从该文件夹（位于你的服务器上）加载其他图像（例如位图图像）吗？该文件夹已经设置了读取权限吗？ - user1693593

@Ken-AbdiasSoftware 是的，我可以从那里加载其他图像，并且在将权限设置为777后也尝试过，但没有成功。 - konapun

你尝试过使用图像的绝对路径到你的服务器吗？你的js脚本从哪个文件夹运行（根目录，/js，...）？ - user1693593

我已经尝试了绝对路径，但仍然没有起作用。脚本是从Web服务器根目录运行的。 - konapun

SVG文件是否使用正确的MIME类型进行传送？ - JayC

我认为是这样的，在对象标签中它可以正常工作，但当设置为JavaScript“Image”的图像源时会失败。 - konapun

Answer 1

托管SVG的服务器必须发送正确的头信息，而不是每个服务器都配置了这样做。这里有一个很好的指南http://kaioa.com/node/45。

如果您使用的是Apache，可以在目录中添加htaccess文件并使用以下代码：

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

这将发送头文件以服务SVG和压缩版本SVGZ。

希望能帮到你！

- SuperIRis