javascript - 捕捉 SVG 路径周围的可单击轮廓

Question

目前，我使用 Snap SVG 创建一个小型建模工具。

var p = Snap.path(pathString).attr({fill:'none', stroke:'black', strokeWidth:1});

在其他元素之间创建连接。

每个元素，包括路径都是可点击的。由于很难准确单击路径，因此我尝试使用 Snap.filter.shadow 在路径周围创建不可见的轮廓，以便为路径触发单击事件:

var filter = this.paper.filter(Snap.filter.shadow(2,2,1));
filter.click(function() {
    do_as_if_i_clicked_the_path();
});
p.attr('filter', filter);

但是向过滤器添加点击事件不起作用。

有没有办法创建一个连接到路径的不可见轮廓，以便我可以在其上添加事件？

Answer 1

一种效果很好的可能性是克隆您想要在其上发生事件的对象，然后将其放大，或者使描边宽度更大，然后具有非常低的不透明度(您可以增加它只是为了测试然后将其缩小到几乎看不见)。

如果将其添加到像本例这样的组中，则只需在该组上拖动即可，因此无需将其删除或执行任何操作(除非您有时需要克隆不在那里，这是有道理的)。

jsfiddle

var s = Snap("#svg");

var myLine = s.path('M0,0L100,100').attr({ stroke: 'black', strokeWidth: 1 });

var myClone = myLine.clone().attr({ strokeWidth: 50, opacity: 0.01 });

var myGroup = s.g( myLine, myClone );
myGroup.drag();