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

Question

我有很多图标svg，我可以使用它们作为字体，如果这是有帮助的，我想使用ng-click(基本上任何类型的点击你知道)的方式，当我点击svg1和svg2不会被点击。到目前为止，我已经尝试了很多图标和许多方法，但都没有成功。我有上传编码的小例子，那个国家的每个地区都有自己的svg，覆盖其他svg，使点击它们不可能。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类-并且仅捕获来自其直接子元素的事件。

因为你在SVG中使用<use>来获得实际的图形，你不能只依赖Angular来绑定事件，因为当你加载脚本时元素还没有存在。您需要将事件侦听器附加到文档，然后在调用所需的函数之前检查目标。这很容易用jQuery实现，如下所示:

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

我稍微改变了一下你的代码来展示如何做到这一点，在这里:http://codepen.io/anon/pen/waLwrm。我使用一个简单的window.console.log()调用来记录单击的元素。您可以在最终代码中将其更改为另一个逻辑。

参考:jQuery悬停问题导致的z-index