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类 - 并且只捕获来自其直接子项的事件。

由于您在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彼此靠近作为可点击的图标

1 个答案: