如何使 SVG 文本元素“可点击”？答案

【问题标题】：How to make an SVG text element "click-through-able"?如何使 SVG 文本元素“可点击”？
【发布时间】：2012-10-06 00:40:29
【问题描述】：

我有一张带有 SVG 文本元素的地图来命名这些位置。我希望位置（形状）是可点击的，而且它们是可点击的，但是因为文本元素在它们之上，如果有人将鼠标悬停在文本元素上并点击，那么什么也不会发生，因为没有点击形状：文本元素是.我怎样才能做到这一点，如果点击文本元素，点击会“穿过”它并到达形状？

【问题讨论】：

标签： javascript svg

【解决方案1】：

Mozilla 为此引入了一个名为 pointer-events 的 CSS 属性。它最初仅限于 SVG 形状，但现在现代浏览器中的大多数 DOM 元素都支持它：

span.label { pointer-events: none; }

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

css 'pointer-events' property alternative for IE

【讨论】：

酷，不知道它适用于 SVG，只有“常规”元素
@Cystack 'pointer-events' 属性从一开始就是 SVG 的一部分（不，它不是由 Mozilla 引入的——尽管 Mozilla 确实率先在 svg 之外使用此属性)。正如第一个链接所说“警告：在 CSS 中对非 SVG 元素使用指针事件是实验性的”。
仅仅为此而拒绝他是卑鄙的；）
我无法让 stackLabels 不窃取 Highcharts 中的鼠标事件，这是我可以开始工作的唯一解决方法！

【解决方案2】：

将此css添加到文本中：

pointer-events: none;

【讨论】：

【解决方案3】：

如果可以使用“”元素内的文本对地图形状进行分组，那么您可以将点击附加到组而不是形状。这样做还会带来额外的好处，即应用于组的变换将同时应用于形状和文本。如果无法进行分组，那么我同意之前的答案绝对是您的最佳选择。基本上正在发生的事情是这样的：大多数人都认为点击向下穿透你的 z-index，但它不是那样工作的。点击通过 DOM 冒泡，所以如果文本不处理点击，它会冒泡到下一个 DOM 元素，即父组或容器。这会继续向上直到到达最顶层的 DOM 元素。

【讨论】：