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

Question

I'm trying to embed an SVG on a canvas but I get an error at event phase 2 when the SVG is served from my own domain. The curious thing is if I the same image is hosted on a different server it works fine. The image I'm testing with is the one here . Even if I wget the image and place it in the image folder I get the same error. However, it does work if I place it in the document with <object data="/images/tiger.svg" type="image/svg+xml"></object> , but not if I set the source in javascript and draw on a canvas.

Here is the code I'm using which errors when the image is hosted at my domain:

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

Here is the error data from Firebug

NONE                          0
defaultPrevented            false
multipleActionsPrevented    false
stopImmediatePropagation    stopImmediatePropagation()  
bubbles                     false
cancelable                  false
eventPhase                    2
isTrusted                   true
timeStamp                   1373387631408000
type                        "error"

Answer 1

The server that hosts the SVG has to send the right headers, and not every server is configured to do so.

There's a good guide here http://kaioa.com/node/45

If you're using apache, you can add an htaccess file to your directory with this code:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

This sends the headers to serve SVG and the compressed version, SVGZ.

Hope this helps!