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

Question

我有很多图标 svg，如果有帮助，我可以将它们用作字体，我想使用 ng-click（基本上是你知道的任何一种点击），就像我点击 svg1 和 svg2 时那样被点击。到目前为止，我已经尝试了很多图标和很多方法，但都没有成功。 I have upload to codepen small example, each region of that country have it's own svg which cover other svg's and make click on them impossible. svg 的基本用法如下：

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

Answer 1

由于您页面中的所有 <svg> 元素都是绝对定位的并且宽度和高度均为 100%，因此可以只捕获最后一个元素中的元素。这种行为来自层内元素的呈现方式，如下例所示：

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

如果所有这些元素具有相同的宽度、高度和位置，您只能捕获最后一个元素的事件，在所有元素的顶部。

要避免这种行为，您可以使用 CSS 执行以下操作：

.regionPosition {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.regionPosition > * {
  pointer-events: all;
}

通过这种方式，您可以禁用 <svg> 元素的事件侦听 - 使用 regionPosition class - 并仅捕获来自其直接子元素的事件。

由于您在 SVG 中使用 <use> 来获取实际图形，因此您不能仅依赖 Angular 来绑定事件，因为当您加载脚本。您需要将事件侦听器附加到文档，然后在调用所需函数之前检查目标。这可以用jQuery轻松完成，如下：

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

我稍微更改了您的代码以展示操作方法，此处：http://codepen.io/anon/pen/waLwrm。我正在使用一个简单的 window.console.log() 调用来记录单击的元素。您可以在最终代码中将其更改为其他逻辑。

参考： jQuery hover problem due to z-index

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

Many svg's near with each other as clickable icons

icons

svg

clickable