Question

我需要在画布元素上添加事件侦听器（我知道它们实际上不是元素）。我知道这只有svg才有可能。所以我按照给定here的示例将一些svg元素导入到画布中。这就是我的代码：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//wherever I put the id inside the svg element it does not fire the event
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
       '<foreignObject width="100%" height="100%">' +
       '<div id="asdf" xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
         '<em >I</em> like ' + 
         '<span style="color:white; text-shadow:0 0 2px blue;">' +
         'cheese</span>' +
       '</div>' +
       '</foreignObject>' +
       '</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
   ctx.drawImage(img, 0, 0);
   DOMURL.revokeObjectURL(url);
}
img.src = url;
document.getElementById('asdf').addEventListener("click", function(){
    alert('AJDEEE');
});

如果我将监听器附加到画布上就可以了。但是当它附加到svg内部的元素时却没有。所以我在任何地方都错了，或者这样做是不可能的？任何帮助将受到高度赞赏。

Answer 1

你拿SVG，你把它渲染到画布，所以你现在有了一个光栅。这就是你需要点击的所有光栅。 SVG消失了。

将侦听器添加到在canvas中导入的svg元素

1 个答案: