如何使SVG文本元素具有“可点击”功能？

Question

我有一张包含SVG文本元素的地图，用于标记位置名称。我希望这些位置（形状）可以被点击，它们确实可以被点击，但是由于文本元素在它们上面，如果某人将鼠标悬停在文本元素上并单击，则什么也不会发生，因为未能单击形状，而是单击了文本元素。如何使得如果单击文本元素，则单击事件“穿过”它并传递给形状呢？

- Cystack

Answer 1

Mozilla推出了一个名为pointer-events的CSS属性来实现此目的。它最初只适用于SVG形状，但现在大多数现代浏览器支持在大多数DOM元素上使用它：

span.label { pointer-events: none; }

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
• https://caniuse.com/?search=pointer-events

这个问题的答案有一些关于如何在旧版IE中实现相同效果的好信息：

css 'pointer-events' 属性在 IE 中的替代方案

- Matt Stone

---

酷，我不知道它可以与SVG一起使用，只知道“常规”元素。 - Cystack

@Cystack，“pointer-events”属性从SVG诞生之初就存在（不，它并不是由Mozilla引入的-尽管Mozilla确实开创了在svg之外使用此属性的先河）。正如第一个链接所说：“警告：在非SVG元素中使用CSS中的pointer-events是实验性的。” - Erik Dahlström

仅因此而对他进行贬低是不好的 ;) - Cystack

我无法让Highcharts中的stackLabels不窃取鼠标事件，这是我能找到的唯一解决方法！ - boxed

Answer 2

将以下CSS添加到文本中：

pointer-events: none;

- william malo

Answer 3

如果可以将地图形状和文本放在“<g>”元素中进行分组，则可以将单击事件附加到组而不是形状。这样做还具有一个额外的好处，即应用于组的变换将同时应用于形状和文本。如果无法进行分组，则我同意先前的答案肯定是你最好的选择。基本上正在发生的是：大多数人将单击视为向下穿透z-index，但事实并非如此。单击事件会通过DOM向上冒泡，因此如果文本未处理单击事件，则事件会冒泡到下一个DOM元素，即父级组或容器。这种过程会一直向上继续，直到达到最顶层的DOM元素。

- user2009125