javascript - 如何制作 SVG 文本元素 "click-through-able"？

Question

我有一张带有 SVG 文本元素的 map 来命名位置。我希望位置(形状)可单击，而且确实如此，但是因为文本元素位于它们的顶部，如果有人将鼠标悬停在文本元素上并单击，则不会发生任何事情，因为未单击形状:文本元素是。我怎样才能做到这样，如果单击文本元素，单击会“穿过”它并到达形状？

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