许多svg'；s作为可点击的图标彼此靠近

我有很多svg图标，如果有帮助的话，我可以使用它们作为字体，我想使用ng click（基本上是你知道的任何一种单击方式），当我单击svg1和svg2时不会被单击。到目前为止，我已经尝试过分配图标和许多方法，但都没有成功。svg的基本用途如下：

<svg>
    <use xlink:href="#icon-region"></use>
</svg>

由于页面中的所有

元素都是绝对定位的，并且宽度和高度都为100%，因此只能捕获最后一个元素中的元素。该行为来自层内元素的渲染方式，如下面的示例：

+-<svg>--+
|+-<svg>--+
||+-<svg>--+
|||        |
+||        |
 +|        |
  +--------+

通过这种方式，您可以使用

regionPosition

类禁用从

元素侦听的事件，并仅捕获来自其直接子元素的事件

由于在SVG中使用

来获取实际的图形，因此不能仅依靠Angle来绑定事件，因为加载脚本时元素还不存在。您需要将事件侦听器附加到文档，然后在调用所需函数之前检查目标。这可以通过jQuery轻松完成，如下所示：

jQuery(document).on('click', '.regionPosition > *', function () {
  // Call your function.
});

我对您的代码做了一些更改，以演示如何执行此操作，请参见：。我正在使用一个简单的

window.console.log（）

调用来记录单击的元素。您可以在最终代码中将其更改为另一个逻辑

参考：

---

标签被实际的图标SVG替换。如果您使用Chrome开发工具检查元素，您将看到这些标记不再存在。如果您已经或可以将jQuery添加到应用程序中，也许您可以这样使用

on

函数：

jQuery（document）.on（'click'，'.regionPosition>*'，function（）{…}）

，而不是

ng click

指令。单击不是问题，单击特定的svg，这是***中的痛苦：）在您的评论之后，我做了一些新的测试，现在我了解了正在发生的事情。问题是在“层”中呈现事物的方式。由于所有

都是绝对位置，宽度和高度均为100%，因此只能捕获最后一个元素/层中的事件。可能可以使用指针的x和y坐标来执行某些操作，但不幸的是，这应该是一个相当复杂的解决方法。在代码中，您只能单击一个svg，任务是单击任何应该调用该svg函数的svg。在蓝色区域，单击是不可能的。@GoncharDenys，看看这个：我刚刚用你的上一个链接录制了我的屏幕。如图所示，可以单击并捕获每个SVG的事件。在视频中，您只需在inspect元素中显示SVG的位置，单击它，它就会显示其他消息。@GoncharDenys，实现此技巧的代码部分是：

jQuery（document）.on（'click'，'.regionPosition>*'，function（）{window.console.log（this）；}）。正如我在您的问题中所评论的，您需要jQuery才能使其工作。我正在更新我的答案以澄清这一点。好的，我明白你的观点，并且它正在起作用。我真的不想使用JQuery，但我想您的答案可以算作答案。
jQuery(document).on('click', '.regionPosition > *', function () {
  // Call your function.
});