如何使 SVG 文本元素“可点击"? [英] How to make an SVG text element "click-through-able"?

问题描述

我有一张带有 SVG 文本元素的地图来命名位置.我希望位置(形状)是可点击的，并且它们是可点击的，但是因为文本元素在它们上面，如果有人将鼠标悬停在文本元素上并点击，那么没有任何反应，因为没有点击形状:文本元素是.我怎样才能做到这样，如果点击文本元素，点击通过"它并到达形状?

I have a map with SVG text elements to name the locations. I want the locations (shapes) to be clickable, and they are, but because the text elements are on top of them, if someone hovers over a text element and clicks, then nothing happens because the shape was not clicked : the text element was. How can I make it so that if the text element is clicked, the click goes "through" it and to the shape ?

推荐答案

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

Mozilla introduced a CSS property for this purpose called pointer-events. It was originally limited to SVG shapes, but is now supported on most DOM elements in modern browsers:

span.label { pointer-events: none; }

• https://developer.mozilla.org/en-US/文档/CSS/指针事件
• http://caniuse.com/pointer-events

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

The answer to this question has some good information on achieving the same result in old IE:

IE 的 css 'pointer-events' 属性替代

这篇关于如何使 SVG 文本元素“可点击"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！