我有一张带有 SVG 文本元素的地图来命名这些位置。我希望位置（形状）是可点击的，它们是可点击的，但是因为文本元素在它们之上，如果有人将鼠标悬停在文本元素上并点击，那么什么也不会发生，因为没有点击形状：文本元素是. 我怎样才能做到这一点，如果单击文本元素，单击会“穿过”它并到达形状？
问问题
17256 次
3 回答
63
为此，Mozilla 引入了一个名为pointer-events的 CSS 属性。它最初仅限于 SVG 形状，但现在现代浏览器中的大多数 DOM 元素都支持它：
span.label { pointer-events: none; }
这个问题的答案有一些关于在旧 IE 中实现相同结果的好信息：
于 2012-10-16T00:19:41.230 回答
7
将此 css 添加到文本中：
pointer-events: none;
于 2012-10-16T00:18:31.277 回答
3
如果可以使用“<g>”元素内的文本对地图形状进行分组，那么您可以将单击附加到组而不是形状。这样做还可以带来额外的好处，即应用于组的变换将同时应用于形状和文本。如果无法进行分组，那么我同意之前的答案绝对是您的最佳选择。基本上正在发生的事情是这样的：大多数人都认为点击向下穿透你的 z-index，但它不是那样工作的。点击通过 DOM 冒泡，所以如果文本不处理点击，它会冒泡到下一个 DOM 元素，即父组或容器。这会继续向上直到到达最顶层的 DOM 元素。
于 2013-05-22T19:30:35.460 回答