我试图在 Canvas 上嵌入 SVG,但我在 event phase 2 处收到错误当从我自己的域提供 SVG 时。奇怪的是,如果我将相同的图像托管在不同的服务器上,它工作正常。我正在测试的图像是 here .即使我wget
图像并将其放在图像文件夹中我得到了同样的错误。但是,如果我将它放在带有 <object data="/images/tiger.svg" type="image/svg+xml"></object>
的文档中,它确实有效。 ,但如果我在 javascript 中设置源代码并在 Canvas 上绘制,则不会。
这是我使用的代码,当图像托管在我的域中时会出错:
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 的服务器必须发送正确的 header ,并且并非每个服务器都配置为这样做。
这里有一个很好的指南http://kaioa.com/node/45
如果您使用的是 apache,您可以使用以下代码将 htaccess 文件添加到您的目录:
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
这会发送 header 以提供 SVG 和压缩版本 SVGZ。
希望这对您有所帮助!
关于 Canvas 上的 Javascript SVG 绘图在事件阶段 2 失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17554368/