如何使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中实现相同结果的好信息:

IE的"指针 - 事件"属性替代方案

Answer 2

将此css添加到文本中:

pointer-events: none;