html用svg事件,javascript-将SVG添加到HTML并处理事件

我有这个SVG文件.显示不同的svg元素(圆形,Eclipse,多边形,折线等)

每个元素都有自己的ID.

单击该特定ID时,可以添加功能(onClick或MouseClicK).

有什么方法可以添加一个通用函数(在JavaScript或Jquery中),该函数可以响应click事件并告诉我们click是从哪个对象(ID)发出的？

所以我需要：

> HTML代码以添加/引用SVG文件.不知道我使用SVG还是Object

标签？哪一种在所有浏览器中都适用？

>然后,JavaScript的JQuery响应鼠标单击元素并告诉您单击了哪个ID？

如果您看到以下SVG,则其具有不同的圆圈,这些圆圈的ID例如01、02、03等

解决方法:

最简单的方法是将svg直接打印到html中.这样,每个SVG元素都是DOM的“真实成员”.

…

…

…

…

接下来是事件处理,可以这样处理(在加载时)：

var svg = document.querySelector('svg#your-svg'),

handlers = {

'e1' : function(e){ … }

};

svg.addEventListener('click', function(e) {

var c = e.target;

while (c !== svg) {

if (c.hasAttribute('id') {

var id = c.getAttribute('id');

if (handlers.hasOwnProperty(id)) {

handlers[id](c);

break;

}

}

c = c.parentNode;

}

});

如果您不熟悉SVG可以插入HTML的所有方式,请查看here.此答案中使用的方法称为»inline SVG«.

标签：svg,html,javascript,jquery

来源： https://codeday.me/bug/20191118/2026953.html