如何使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/docs/CSS/pointer-events
- http://caniuse.com/pointer-events
- https://developer.mozilla.org/en-US/docs/CSS/pointer-events
- http://caniuse.com/pointer-events
这个问题的答案有一些关于在旧IE中实现相同结果的好信息：
The answer to this question has some good information on achieving the same result in old IE:
这篇关于如何使SVG文本元素“点击通过”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
