Snap 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

一种非常有效的可能性是克隆你想要在其上发生事件的对象，然后将其放大，或者使 strokeWidth 更大，然后具有非常低的不透明度（你可以增加它只是用于测试，然后将其缩小到几乎不可见）。

如果你像这个例子一样把它添加到一个组中，你可以只拖拽这个组，所以不需要删除它或任何东西（除非你需要克隆有时不在那里，这是有道理的） .

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();

Snap SVG 路径周围的可点击轮廓

Clickable outline around Snap SVG path

javascript

path

click

snap.svg

outline