拉斐尔元素选择问题

Question

希望这对任何拉斐尔专家来说都是一个简单的问题！

我创建了一个路线图，用户可以点击每个国家/地区查看详细信息。它工作正常，只是将鼠标移到红线上会触发mouseout事件。我需要红线才能有效地成为地图上的图像而不是交互元素。我如何实现这一目标？

查看地图： http://www.martyn-roberts.co.uk/cycleafrica/route

谢谢！

Answer 1

您可以在红线上创建一个不可见的图层，从而触发地图上的动画。

Answer 2

一年前和一个季度前，这个答案会非常优雅......虽然不是直接通过拉斐尔使用SVG的pointer-events property，但有一种非常简单的方法可以实现这一点。您需要做的就是使用指针事件设置与路径路径关联的节点的样式：none。在javascript和使用jquery，这将是

$(routePath.node).css( 'pointer-events', 'none' );

或者直接使用javascript：

routePath.node.style.pointerEvents = 'none';

这会强制所有鼠标事件“掉落”到路径后面的元素上。

这是展示use of pointer events with circles and paths的小提琴。