画布上的Javascript SVG绘图在事件阶段2失败
Javascript SVG drawing on canvas failing at event phase 2
我试图在画布上嵌入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提供服务。
希望这能有所帮助!
相关文章:
- Backbone fetch中的Ajax在fetch调用退出后完成,因此fetch调用中没有成功/失败事件
- 如何使用onclick事件触发此代码.我尝试过,但失败了
- jQuery:从点击事件传递变量值失败
- 当表单验证失败时,我将如何最好地处理下一个事件
- Angular JS,把json放到ng重复出一个事件失败
- 两个不同版本的 jQuery 导致事件侦听失败
- IE 焦点事件在 ajax 加载后随机失败
- 如何在node中编写事件发射器.js让你创建一个函数“myFunction”,然后在运行时调用成功或失败
- jQuery AJAX 请求事件 - 完成,失败,成功
- 重新加载后,onclick 事件失败
- Javascript (jQuery) 事件失败.我该如何解决这个问题
- Node JS HTTP Server request.on('data') 事件失败
- 元素上的jQuery绑定事件失败
- 使用.live()和item.length绑定事件失败
- 获取鼠标移动事件失败
- 用于postMessage事件失败的Jasmine spy()
- Fullcalendar eventDrop回调函数从全天事件到限时事件失败
- React-router:从路由器获取参数,监听事件失败
- 为什么此单击事件失败
- JavaScript onMouseOver事件失败