如何使SVG文本元素“点击通过”？

Question

我有一张带有SVG文本元素的地图来命名这些位置。我希望位置（形状）是可点击的，它们是，但因为文本元素位于它们之上，如果有人将鼠标悬停在文本元素上并单击，则没有任何反应，因为没有单击形状：文本元素是。我如何才能使它如果单击文本元素，点击会“穿过”它并形成形状？

Answer 1

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

span.label { pointer-events: none; }

• https://developer.mozilla.org/en-US/docs/CSS/pointer-events
• http://caniuse.com/pointer-events

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

css 'pointer-events' property alternative for IE

Answer 2

将此css添加到文本中：

pointer-events: none;

Answer 3

如果可以将地图形状与“＆lt; g＆gt;”内的文本分组元素，然后您可以将单击附加到组而不是形状。这样做还可以使应用于组的变换的附加好处同时适用于形状和文本。如果无法进行分组，那么我同意以前的答案绝对是你最好的选择。基本上发生的事情是这样的：大多数人想象出一个点击向下穿过你的z-index，但它不会那样工作。点击通过DOM向上冒泡，因此如果文本没有处理点击，它会冒泡到下一个DOM元素，即父组或容器。这继续向上，直到它到达最顶层的DOM元素。